Cara Membuat Tombol Download Dengan Style Outline Dan Fill Hover Di Blogger
Apa itu gaya outline dan fill hover? gaya outline ini maksudnya pada bagian luar tombol download ada garis tepinya tetapi bagian dalamnya kosong/ transparant. kalau fill hover itu saat kita sentuh akan mengisi semua gaya tombol dengan warna yang akan kita tentukan dan menghilangkan outlinenya tadi. nah jika kalian penasaran bagaimana bentuknya kalian bisa melihat demonya di Codepen dibawah ini!
Bagaimana keren bukan ? pastinya keren dong, apa sih yang ngga keren tutorial dari blog ini, hehe.
nah sama seperti kemarin, kita akan mempercantik blog tanpa membebani loading blog. karena disini kita hanya menggunakan HTML dan CSS. dan kode css nya sudah saya minimalisir, juga tidak menggunakan font awesome. nah bagi kalian yang sudah tidak sabar untuk menerapkan tombol download dengan gaya outline dan fill hover silahkan simak tutorial dibawah!
Oh ya apabila terjadi error atau tombol downloadnya tidak tampil silahkan hapus tombol download bawaan dari blog kalian. mungkin ada persamaan penulisan class di css nya. tapi saya rasa itu tidak akan terjadi. dan untuk jaga jaga saja kalau hal tersebut terjadi, silahkan hapus code bawaannya.
TUTORIAL:
Hal pertama yang harus dilakukan adalah masuk ke akun blogger masing masing, jika sudah silahkan masuk ke menu Tema lalu ke edit html. Silahkan lakukan hal tersebut terlebih dahulu.
Nah jika sudah silahkan copy 1 paket kode CSS dibawah ini dan pasang diatas tag </head> jangan letakkan di bawah kode <style> jika iya maka tombol download mungkin tidak akan tampil.
<style>/*nfsmediabutton*/
.buttonnfs {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
}
.btnfs-primary:hover {
color: #212529;
background-color: #56caeb;
border-color: #4ac7ea; }
.btnfs-primary:focus, .btnfs-primary.focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(120, 213, 239, 0.5);
box-shadow: 0 0 0 0.2rem rgba(120, 213, 239, 0.5); }
.btnfs-primary.disabled, .btnfs-primary:disabled {
color: #212529;
background-color: #78d5ef;
border-color: #ff0000; }
.btnfs-primary:not(:disabled):not(.disabled):active, .btnfs-primary:not(:disabled):not(.disabled).active,
.show > .btnfs-primary.dropdown-toggle {
color: #fff;
background-color: #263638;
border-color: #727576; }
.btnfs-primary:not(:disabled):not(.disabled):active:focus, .btnfs-primary:not(:disabled):not(.disabled).active:focus,
.show > .btnfs-primary.dropdown-toggle:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(120, 213, 239, 0.5);
box-shadow: 0 0 0 0.2rem rgba(120, 213, 239, 0.5); } .buttonnfs.btnnfs-outline-white {
border-color: rgba(255, 255, 255, 0.8);
background: none;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
border-radius: 30px;
border-width: 2px; }
.buttonnfs.btnnfs-outline-white:hover, .buttonnfs.btnnfs-outline-white:focus, .buttonnfs.btnnfs-outline-white:active {
background: #fff;
border-color: #263638;
color: #000; }.buttonnfs {
cursor: pointer;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: none !important;
box-shadow: none !important; }
.buttonnfs:hover, .buttonnfs:active, .buttonnfs:focus {
outline: none; }
.buttonnfs.btnfs-primary {
font-family: Fira Code;
text-decoration:none;
background: #transparent;
border: 2px solid #263638;
color: #263638; }
.buttonnfs.btnfs-primary:hover {
border: 2px solid #263638;
background: #263638;
color: #fff; }
.buttonnfs.btnfs-primary.buttonnfs-outline-primary {
border: 2px solid #fff;
background: transparent;
color: #ff0000; }
.buttonnfs.btnfs-primary.buttonnfs-outline-primary:hover {
border: 2px solid transparent;
background: #ff0000;
color: #fff; }.mt-3,
.my-3 {
margin-top: 1rem !important; }.pb-3,
.py-3 {
padding-bottom: 1rem !important; }
.pt-3,
.py-3 {
padding-top: 1rem !important; }.pl-4,
.px-4 {
padding-left: 1.5rem !important; }
.py-4 {
padding-top: 1.5rem !important; }
.pr-4,
.px-4 {
padding-right: 1.5rem !important; }</style>Jika sudah silahkan simpan template terlebih dahulu, jika sudah sekarang kita akan terapkan kode html untuk memanggil kode css diatas agar tombol download bisa tampil.
untuk penerepannya sangat mudah dan caranya sama seperti yang di artikel kemaren, silahkan masuk ke menu postingan / halaman dan buat postingan / halaman baru. jika sudah silahkan masuk ke mode html bukan di mode compose. Sebelumnya copy 1 paket kode HTML dibawah ini dahulu!
<center><a href="#" class="buttonnfs btnfs-primary btnnfs-outline-white mt-3 py-3 px-4">Download Now!</a></center>Untuk cara penerapannya masuk ke mode html jangan compose, lalu pastekan saja kode HTML diatas. jika bingung kalian bisa lihat screenshot dibawah ini.
Selanjutnya tekan pratinjau untuk melihat bagaimana hasilnya. Apabila sudah tampil sama seperti Demo diatas tandanya tombol download sudah berhasil diterapkan dan silahkan Publikasikan Postingan / Halaman anda.
Selanjutnya tekan pratinjau untuk melihat bagaimana hasilnya. Apabila sudah tampil sama seperti Demo diatas tandanya tombol download sudah berhasil diterapkan dan silahkan Publikasikan Postingan / Halaman anda.
Apabila tidak tampil silahkan cek lagi kode css apakah sudah diletakkan diatas kode </head>, jika belum silahkan letakkan di atas kode </head>. Apabila kode CSS sudah diletakkan dengan benar, silahkan cek lagi kode html yang ada di Postingan / Halaman yang tadi di publikasikan, kemungkinan ada kesalahan penulisan kode. Apabila menurut anda semua sudah betul silahkan terapkan cara pertama yang sudah saya kasih tau diatas. yaitu mengecek kode CSS tombol download lain, kemungkinan bertabrakan. Apabila loading blog menjadi berat silahkan minify dahulu kode cssnya di cssminyfier.
PENUTUP:
Nah itu saja cara memasang tombol download dengan gaya Outline dan Fill hover, apabila ada yang kesulitan silahkan tanyakan di kolom komentar. terimaksih sudah berkunjung. sampai jumpa di next artikel.
Jangan sekali kali mengubah atau memodifikasi kode html dan css diatas!!! karena kami membuat kode diatas juga bukan perkara yang mudah! copas boleh asal credit/sumber jangan dihapus!!! Tutorial asli dari nafas media 11/04/2020.