Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Tombol Download CSS Keren Ala Maringngerrang

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.
  1. 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".
  2. Membuat Tombol Download CSS Keren Ala Maringngerrang
  3. Setelah itu pada Desainer Tema Blogger, pilih menu Lanjutan lalu buka Tambahkan CSS
  4. Membuat Tombol Download CSS Keren Ala Maringngerrang
  5. 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.
  6. 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}
  7. 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.
  8. Sedangkan untuk kode yang digunakan pada background-image kamu bisa menggantinya sesuai gambar yang disediakan di bawah.
  9. 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.
  10. <div style="text-align:center">
      <a class="maringngerrang-btn" href="#">Unduh</a>
    </div>
  11. Lalu kamu bisa mengganti bagian yang ditandai dari kode di atas dengan link dan teks pada tombol sesuai keinginan kamu.

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.

Membuat Tombol Download CSS Keren Ala Maringngerrang
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgZmlsbD0iI2ZmZiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTcgMTN2LTEzaC0ydjVoLTJ2LTNoLTJ2N2gtMnYtOWgtMnYxM2gtNmwxMSAxMSAxMS0xMXoiLz48L3N2Zz4=

Membuat Tombol Download CSS Keren Ala Maringngerrang
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgZmlsbD0iI2ZmZiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkuNDc5IDEwLjA5MmMtLjIxMi0zLjk1MS0zLjQ3My03LjA5Mi03LjQ3OS03LjA5Mi00LjAwNSAwLTcuMjY3IDMuMTQxLTcuNDc5IDcuMDkyLTIuNTcuNDYzLTQuNTIxIDIuNzA2LTQuNTIxIDUuNDA4IDAgMy4wMzcgMi40NjMgNS41IDUuNSA1LjVoMTNjMy4wMzcgMCA1LjUtMi40NjMgNS41LTUuNSAwLTIuNzAyLTEuOTUxLTQuOTQ1LTQuNTIxLTUuNDA4em0tNy40NzkgNi45MDhsLTQtNGgzdi00aDJ2NGgzbC00IDR6Ii8+PC9zdmc+

Membuat Tombol Download CSS Keren Ala Maringngerrang
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.
  1. 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".
  2. Membuat Tombol Download CSS Keren Ala Maringngerrang
  3. Setelah itu pada Desainer Tema Blogger, pilih menu Lanjutan lalu buka Tambahkan CSS
  4. Membuat Tombol Download CSS Keren Ala Maringngerrang
  5. 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.
  6. .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}}
  7. 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.
  8. <div style="text-align:center">
      <a class="buttonDownload" href="#">Unduh</a>
    </div>
  9. 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.

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.

Penutup

Selain tombol download di atas, kamu juga bisa menggunakan tombol download yang dilengkapi dengan nama dan ukuran file, silakan baca di sini. Itulah beberapa langkah yang bisa kamu gunakan untuk menggunakan beberapa gaya tombol download dengan animasi CSS yang bisa kamu pasang pada halaman blog kamu. Semoga pembahasan dalam tulisan ini bisa bermanfaat dan bisa memberikan wawasan baru untuk kamu. Apabila ada hal-hal yang kurang jelas dan perlu ditanyakan, silakan sampaikan pada kolom komentar di bawah atau melalui halaman contact blog ini. Terima kasih dan sampai jumpa!

Posting Komentar untuk "Membuat Tombol Download CSS Keren Ala Maringngerrang"