Responsive dan Stylish Download button CSS
Ini adalah tombol download yang saya kreasikan sendiri. Berhubung untuk sementara waktu saya ingin mencoba membuat tampilan-tampilan yang lain, maka CSS dan penggunaan dari tombol ini harus saya Backup terlebih dahulu. Sayang kan kalau tombol yang sudah susah-susah di buat harus di buang begitu saja?
Jadi, selain untuk berbagi, postingan ini saya anggap sebagai media backup untuk hasil kerja keras ini.
Tombol download ini murni mengandalkan CSS. Memang tampilannya terlihat tidak begitu memukau, tapi saya pikir, ini masih cukup bagus kok.
Langsung saja ke Langkah pengaplikasiannya,
Font
Untuk Font saya menggunakan font Oswald.
Tempatkan kode CSS font ini di bawah kode <head> pada template.
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
Jika pada template kamu sudah menggunakan font Oswald, langkah ini bisa di lewati.
CSS tombolnya
Ini lah CSS tombolnya. Letakkan kode CSS ini antara <b:skin><![CDATA[ dengan ]]></b:skin> atau antara <style> dengan </style> pada template.
.tombol {
position:relative;
padding:16px;
width:200px;
background:#FFF;
box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}
.tombol:before,
.tombol:after {
content:'';
position:absolute;
z-index:-2;
}
.unduh {
border-radius:4px;
margin:0 auto;
}
.unduh:before,
.unduh:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:200px;
max-height:100px;
box-shadow:0 15px 10px rgba(0,0,0,0.9);
transform:rotate(-3deg);
}
.unduh:after {
right:10px;
left:auto;
transform:rotate(3deg);
}
.unduh a {
font-weight:bold;
font-size:20px;
font-family:"Oswald",sans-serif;
text-transform:uppercase;
color:#7f7f7f;
text-decoration:none;
text-shadow:0 1px 0 #FFF;
}
.unduh a:hover {
transition:all 1s ease-in-out;
color:#6BB200;
}
.unduh span {
font-family:"FontAwesome";
font-size:30px;
color:#7f7f7f;
text-decoration:none;
text-shadow:0 1px 0 #FFF;
margin-right:.4em;
margin-left:.4em;
}
Ikon pada tombolnya
Untuk ikonnya, saya menggunakan Font Awesome.
Jika semua langkah di atas telah di terapkan pada template, Simpan template. Berarti semua sudah bisa di katakan selesai. Dan ini lah tahap terakhirnya.
Kode penulisan
Untuk menggunakannya pada postingan atau tempat yang di inginkan, kamu dapat menggunakan format penulisan seperti di bawah ini,
<div class="tombol unduh"><span class="fa fa-cloud-download"></span> <a href="#">download</a></div>
Jangan lupa untuk menulis kode ini pada Mode HTML saat menulis postingan dan ganti <a href="#"> dengan url yang kamu inginkan.
Hasilnya
Ini lah hasilnya. Sebelah kiri tampilan tombol saat standby dan sebelah kanan adalah tampilan tombol saat di hover.
Terakhir, Tombol ini sudah saya uji coba dan tampil dengan baik pada Browser Mozilla Firefox, Internet Explorer 11 dan Google Chrome. Jadi, silahkan di coba untuk kamu yang ingin menggunakannya.
0 komentar:
Post a Comment
Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.