› ›

Tutorial Membuat Tombol Button Download di Blogger Menggunakan CSS

anaksmanda.com - Seorang blogger biasanya ingin melakukan inovasi dan penampilan agar postingannya terlihat menarik. Salah satunya adalah dengan membuat tombol pada postingan blog. Biasanya pesan dengan tombol atau tombol seperti ini digunakan untuk menampilkan dan memperjelas tombol download, demo dan lain-lain.

Jika kalian ingin memliki button di artikel atau dalam halaman tertentu, disini kami akan menjelaskan tutorial yang sangat mudah hanya dengan meletakan kode CSS saja, berbeda dengan yang lain, button ini menggunakan efek "hover" dan "inset" sederhana sehingga tidak akan membebani kinerja blog.

Ok singkat saja kita langsung saja ke tutorial :

1. Simpan CSS Ini Diatas </style>

#wrap {margin:20px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family:'Open Sans',sans-serif;text-decoration:none;font-weight:700;background:#30abd5;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
a.btn:hover {background:#30abd5;color:#fff;box-shadow:inset 0px -50px 0px #22313F;}
a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;}
a.btn.warn {background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0 #30abd5;}
a.btn.warn:hover {background:#f5f7fa;color:#fff;box-shadow:inset 0px -50px 0px #30abd5;}
a.btn.warn:active {color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} 0px -50px 0px #30abd5;}

2. Lalu gunakan markup dibawah ini pada post editor tab HTML

<div id="wrap"><a class="btn" href="#">Button 1</a></div>
<div id="wrap"><a class="btn warn" href="#">Button 2</a></div>

3. Simpan.

Berikut adalah Demo Button berdasarkan CSS diatas bisa kalian lihat dibawah ini :

 Button 1

Agar tampilan lebih menarik, kalian bisa kreasikan kembali css diatas sesuai keinginan kalian. Semoga berhasil terima kasih.