Membuat Tombol Download CSS Keren Ala Maringngerrang
Tombol Download ala Maringngerrang
Tombol download bisa dibilang merupakan salah satu elemen yang biasanya sering digunakan dalam membuat posting atau artikel di blog, khususnya untuk posting atau artikel yang mengandung link download di dalamnya. Untuk link download yang biasanya tunggal atau hanya satu link, biasanya akan lebih sulit dilihat oleh pengunjung blog dibandingkan link download yang lebih dari satu.Tampilan link download yang cuma ada satu biasanya akan kurang mencolok dan tidak mudah terlihat oleh pengunjung blog tersebut. Oleh karena itu menggunakan sistem tombol pada link download yang dipasang di posting blog merupakan cara yang cukup efisien dan nampak keren untuk diterapkan.
Salah satu tombol download dengan animasi CSS yang sederhana, ringan, dan keren, yang bisa kamu pasang dan gunakan di blog kamu adalah tombol download berikut ini yang telah dimodifikasi oleh Maringngerrang.com dilengkapi dengan ikon yang simpel dan bisa diganti-ganti. Selain itu untuk membuat tombol CSS tersebut tetap ringan, maka gambar ikon yang digunakan adalah ikon SVG. Untuk melihat contoh atau live demo dari tombol download tersebut, kamu bisa melihatnya pada link halaman berikut ini.
Dengan tombol download tersebut, kamu bisa membuat pengunjung blog kamu lebih mudah menemukan link yang ingin kamu tujukan untuk mereka. Jadi, bagi kamu yang tertarik untuk menggunakan tombol CSS tersebut, kamu bisa mengikuti langkah-langkah berikut ini.
- Pertama-tama kamu perlu menambahkan kode CSS untuk tombol tersebut ke blog kamu. Caranya silakan buka Blogger.com, kemudian pada bagian menu Tema klik tombol Sesuaikan untuk masuk ke "Desainer Tema Blogger".
- Setelah itu pada Desainer Tema Blogger, pilih menu Lanjutan lalu buka Tambahkan CSS
- Kemudian tambahkan kode berikut pada kotak teks yang ada. Menu ini kadang tergantung dari template yang kamu gunakan, jika menu "Tambahkan CSS" tidak dapat kamu temukan silakan buka menu Edit HTML lalu temukan kode
]]></b:skin>
dan letakkan kode berikut di atasnya. - Kamu bisa mengganti bagian-bagian kode warna yang ditandai dari kode CSS di atas dengan kode HEX warna yang kamu inginkan sebagai warna background atau warna latar belakang dari tombol tersebut serta warna background animasi hover dari tombol tersebut.
- Sedangkan untuk kode yang digunakan pada
background-image
kamu bisa menggantinya sesuai gambar yang disediakan di bawah. - Setelah itu klik "Terapkan ke Blog" kemudian klik Kembali ke Blogger. Langkah selanjutnya adalah kamu tinggal memasang kode dari tombol download, pada halaman posting atau halaman statis di blog kamu. Untuk memasang tombol tersebut, kamu bisa menggunakan kode berikut ini.
- Lalu kamu bisa mengganti bagian yang ditandai dari kode di atas dengan link dan teks pada tombol sesuai keinginan kamu.
a.maringngerrang-btn,a.maringngerrang-btn:visited{-webkit-transition:all .2s;transition:all .2s;display:inline-block;text-align:center;background:#7CB342;padding:10px 30px;color:#fff!important;margin:32px auto;margin:2rem auto;border-radius:4px;-webkit-box-shadow:0 0 0 6px rgba(95,95,95,0.1);box-shadow:0 0 0 6px rgba(95,95,95,0.1);font-size:22px;font-size:1.375rem;text-transform:uppercase;text-decoration:none!important;font-weight:bold}
a.maringngerrang-btn{background-color:#7CB342;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgZmlsbD0iI2ZmZiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgNC45NDJjMS44MjcgMS4xMDUgMy40NzQgMS42IDUgMS44MzN2Ny43NmMwIDEuNjA2LS40MTUgMS45MzUtNSA0Ljc2di0xNC4zNTN6bTktMS45NDJ2MTEuNTM1YzAgNC42MDMtMy4yMDMgNS44MDQtOSA5LjQ2NS01Ljc5Ny0zLjY2MS05LTQuODYyLTktOS40NjV2LTExLjUzNWMzLjUxNiAwIDUuNjI5LS4xMzQgOS0zIDMuMzcxIDIuODY2IDUuNDg0IDMgOSAzem0tMiAxLjk2Yy0yLjQ0Ni0uMTI0LTQuNS0uNjExLTctMi40MTYtMi41IDEuODA1LTQuNTU0IDIuMjkyLTcgMi40MTZ2OS41NzVjMCAzLjA0MiAxLjY5IDMuODMgNyA3LjEwNyA1LjMxMy0zLjI4MSA3LTQuMDY1IDctNy4xMDd2LTkuNTc1eiIvPjwvc3ZnPg==);background-repeat:no-repeat;background-position:15px 50%;padding:10px 20px 10px 55px}
a.maringngerrang-btn:hover{background-color:#689F38}
<div style="text-align:center">
<a class="maringngerrang-btn" href="#">Unduh</a>
</div>
Mengganti Ikon
Setelah memasang tombol download tersebut sesuai dengan langkah-langkah yang sudah dijelaskan di atas, kamu bisa melakukan modifikasi dengan mengganti gambar ikon yang ada pada tombol download tersebut. Kamu bisa menggunakan beberapa kode gambar SVG yang ada berikut ini.data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgZmlsbD0iI2ZmZiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTcgMTN2LTEzaC0ydjVoLTJ2LTNoLTJ2N2gtMnYtOWgtMnYxM2gtNmwxMSAxMSAxMS0xMXoiLz48L3N2Zz4=
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgZmlsbD0iI2ZmZiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkuNDc5IDEwLjA5MmMtLjIxMi0zLjk1MS0zLjQ3My03LjA5Mi03LjQ3OS03LjA5Mi00LjAwNSAwLTcuMjY3IDMuMTQxLTcuNDc5IDcuMDkyLTIuNTcuNDYzLTQuNTIxIDIuNzA2LTQuNTIxIDUuNDA4IDAgMy4wMzcgMi40NjMgNS41IDUuNSA1LjVoMTNjMy4wMzcgMCA1LjUtMi40NjMgNS41LTUuNSAwLTIuNzAyLTEuOTUxLTQuOTQ1LTQuNTIxLTUuNDA4em0tNy40NzkgNi45MDhsLTQtNGgzdi00aDJ2NGgzbC00IDR6Ii8+PC9zdmc+
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgZmlsbD0iI2ZmZiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOSAzaDZ2MmgtNnYtMnptMyAxNWw3LThoLTR2LTRoLTZ2NGgtNGw3IDh6bTMtMTZ2LTJoLTZ2Mmg2em0zLjIxMy0uMjQ2bC0xLjIxMyAxLjU5OWMyLjk4NCAxLjczMiA1IDQuOTU1IDUgOC42NDcgMCA1LjUxNC00LjQ4NiAxMC0xMCAxMHMtMTAtNC40ODYtMTAtMTBjMC0zLjY5MiAyLjAxNi02LjkxNSA1LTguNjQ3bC0xLjIxMy0xLjU5OWMtMy40NjUgMi4xMDMtNS43ODcgNS44OTctNS43ODcgMTAuMjQ2IDAgNi42MjcgNS4zNzMgMTIgMTIgMTJzMTItNS4zNzMgMTItMTJjMC00LjM0OS0yLjMyMi04LjE0My01Ljc4Ny0xMC4yNDZ6Ii8+PC9zdmc+
Selain itu, kamu bisa mengganti gambar ikon tersebut sesuai dengan gambar yang kamu inginkan. Jika kamu ingin melihat live demo dengan ikon tombol yang bisa diganti-ganti, kamu bisa coba menggunakan tool HTML Editor dari Maringngerrang.com. Tool HTML Editor tersebut bisa kamu gunakan untuk berbagai keperluan.
Tombol Download ala Mas Sugeng
Selain tombol di atas, kamu juga bisa menggunakan tombol download lain dengan animasi yang juga tidak kalah keren. Tombol download yang satu ini juga menggunakan ikon, namun ikon tersebut juga menggunakan animasi hover yang terkesan lebih apik. Tombol download ala mas Sugeng.Bagi kamu yang sudah bergelut cukup lama di dunia blogger, kemungkinan kamu kenal dengan sosok yang satu ini. Mas Sugeng, merupakan seorang blogger Indonesia yang juga merupakan pembuat template Blogger yang cukup sukses. Seperti layaknya pembuat template blogger pada umumnya, tentu Mas Sugeng ini punya gaya tersendiri dalam membuat desain, termasuk desain untuk tombol animasi yang bisa digunakan dalam template blog buatannya.
Salah satu tombol download dengan animasi CSS yang cukup simpel namun keren, menurut saya, adalah tombol download yang digunakan Mas Sugeng dalam template-nya. Untuk melihat contoh/live demo dari tombol download tersebut, kamu bisa buka halaman berikut ini.
Untuk memasang tombol download ala Mas Sugeng tersebut, sebenarnya caranya kurang lebih sama seperti di atas. Untuk lebih jelasnya silakan ikuti langkah-langkah berikut ini.
- Pertama-tama kamu perlu menambahkan kode CSS untuk tombol tersebut ke blog kamu. Caranya silakan buka Blogger.com, kemudian pada bagian menu Tema klik tombol Sesuaikan untuk masuk ke "Desainer Tema Blogger".
- Setelah itu pada Desainer Tema Blogger, pilih menu Lanjutan lalu buka Tambahkan CSS
- Kemudian tambahkan kode berikut pada kotak teks yang ada. Menu ini kadang tergantung dari template yang kamu gunakan, jika menu "Tambahkan CSS" tidak dapat kamu temukan silakan buka menu Edit HTML lalu temukan kode
]]></b:skin>
dan letakkan kode berikut di atasnya. - Setelah itu klik "Terapkan ke Blog" kemudian klik Kembali ke Blogger. Langkah selanjutnya adalah kamu tinggal memasang kode dari tombol download, pada halaman posting atau halaman statis di blog kamu. Untuk memasang tombol tersebut, kamu bisa menggunakan kode berikut ini.
- Lalu kamu bisa mengganti bagian yang ditandai dari kode di atas dengan link dan teks pada tombol sesuai keinginan kamu dan silakan publikasikan posting tersebut dan lihat hasilnya di halaman blog kamu.
.buttonDownload{margin:16px 0;margin:1rem 0;border-radius:3px;display:inline-block;text-decoration:none!important;position:relative;padding:10px 25px;color:white!important;font-weight:bold;font-size:.9em;text-align:center;text-indent:15px;-webkit-transition:all .4s;transition:all .4s}
.buttonDownload:hover{opacity:.85}
.buttonDownload{background:#2675A6}
.buttonDownload::before,.buttonDownload::after{content:' ';display:block;position:absolute;left:15px;top:52%;box-sizing:content-box}
.buttonDownload::before{width:10px;height:2px;border-style:solid;border-width:0 2px 2px}
.buttonDownload::after{width:0;height:0;margin-left:3px;margin-top:-7px;border-style:solid;border-width:4px 4px 0 4px;border-color:transparent;border-top-color:inherit;-webkit-animation:downloadArrow 2s linear infinite;animation:downloadArrow 2s linear infinite;-webkit-animation-play-state:paused;animation-play-state:paused}
.buttonDownload:hover::after{-webkit-animation-play-state:running;animation-play-state:running}
@-webkit-keyframes downloadArrow{0%{margin-top:-7px;opacity:1}0.001%{margin-top:-15px;opacity:0}50%{opacity:1}100%{margin-top:0;opacity:0}}
@keyframes downloadArrow{0%{margin-top:-7px;opacity:1}0.001%{margin-top:-15px;opacity:0}50%{opacity:1}100%{margin-top:0;opacity:0}}
<div style="text-align:center">
<a class="buttonDownload" href="#">Unduh</a>
</div>
Akan tetapi, berbeda dengan tombol download yang sebelumnya, tombol download animasi CSS dari Mas Sugeng ini tidak bisa diganti untuk ikon pada tombol tersebut. Karena pada dasarnya ikon tersebut tidak menggunakan gambar dan hanya menggunakan kode CSS murni secara keseluruhan.
Posting Komentar untuk "Membuat Tombol Download CSS Keren Ala Maringngerrang"
Silakan sampaikan komentar kamu dengan mematuhi syarat dan ketentuan berikut:
Diperbolehkan menggunakan link, selama tidak mengarah pada situs yang mengandung perjudian, pornografi, dan konten ilegal lain. Tidak diperbolehkan promosi jualan, produk, jasa, dsb.
Tidak boleh menggunakan kata-kata yang kasar, tidak pantas, mengandung SARA, atau penghinaan. Diharapkan saling menghargai satu sama lain.
Setiap komentar segera diterbitkan setelah moderasi, pastikan komentar kamu sudah benar sebelum dipublikasikan dan backlink tidak akan dihilangkan oleh admin. Admin berhak menghapus komentar yang melanggar.
Blogwalking dan saling memberi salam diperbolehkan. Menerima pemasangan backlink dofollow, tautan ada di menu navigasi.
Gunakan <i rel="code">Text here</i> untuk komentar yang berisi kode singkat.
Gunakan <i rel="pre">Text here</i> untuk komentar yang berisi kode panjang.
Setiap komentar yang mengandung kode/sintaks dengan rel code/pre di atas, wajib di-parse terlebih dahulu pada menu Alat > Script Parse di menu navigasi di atas.
Kamu juga bisa memberikan komentar bergaya <b>cetak tebal</b> maupun <i>cetak miring</i>. Komentar dengan kode HTML selain cetak tebal/miring atau link tidak diperbolehkan untuk dipublikasikan.