Cara Membuat Tombol Responsive Dan 3D seperti Kang Rian
Selamat Datang Agan/aganwati kali ini saya akan berbagi tips Keren Dan Cocok Untuk Semua Blogger .
Yaitu Tombol 3D Kang Rian baiklah tombol 3d bisa digunakan dimana saja untuk memperindah blog dengan tombol 3d nya, contohnya: sidebar blog, beadscrumb blog, untuk widgget follower blog, postingan blog dan lain-lain pasti pada udah gak sabaar kan langsung saja ini dia langkah-langkahnya ;
Langkah-langkah :
- Pilih Menu Template > Edit HTML
- Taruh Kode Di Atas </style> atau diatas ]]></b:skin> gunakan tombol
Ctrl
+
F
, untuk mempermudah
- Lihat Kode :
.tombol { display: inline-block; text-decoration: none; outline: 0; cursor: pointer; font: 700 12px/1em HelveticaNeue,Arial,sans-serif; padding: 8px 11px; color: #555; text-shadow: 0 1px 0 #fff; background: #f5f5f5; background: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#f0f0f0)); background: -moz-linear-gradient(top,#f9f9f9,#f0f0f0); border: 1px solid #dedede; border-color: #dedede #d8d8d8 #d3d3d3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; -moz-box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; } .tombol:focus,.tombol:hover { color: #555; background: #efefef; background: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#e9e9e9)); background: -moz-linear-gradient(top,#f9f9f9,#e9e9e9); border-color: #ccc; -webkit-box-shadow: 0 2px 1px #e0e0e0,inset 0 1px 0 #fbfbfb; -moz-box-shadow: 0 2px 1px #e0e0e0,inset 0 1px 0 #fbfbfb; box-shadow: 0 1px 2px #e0e0e0,inset 0 1px 0 #fbfbfb; } .tombol:active { position: relative; top: 1px; color: #555; background: #efefef; background: -webkit-gradient(linear,left top,left bottom,from(#eaeaea),to(#f4f4f4)); background: -moz-linear-gradient(top,#eaeaea,#f4f4f4); border-color: #c6c6c6; -webkit-box-shadow: 0 1px 0 #fff,inset 0 0 5px #ddd; -moz-box-shadow: 0 1px 0 #fff,inset 0 0 5px #ddd; box-shadow: 0 1px 0 #fff,inset 0 0 5px #ddd; } .tombol.bulat { padding: 8px 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } button.tombol,input.tombol { *width: auto; *overflow: visible; } .tombol img { border: none; vertical-align: bottom; } .tombol.kecil { padding: 5px 11px; font-size: 11px; font-weight: 400; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .tombol.kecil.bulat { -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; } .tombol.besar { padding: 12px 15px; font-size: 20px; font-weight: 400; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .tombol.besar.bulat { padding: 12px 22px; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px }
4. SimpanDan Lihat Hasilnya :)
PENERAPAN Mode HTML
1. TOMBOL KECIL 3D
a class='tombol kecil'>Tombol Kecil</a>
2. TOMBOL BESAR 3D
<a class='tombol besar'>Tombol Besar</a>
3.TOMBOL STANDAR 3D
<a class='tombol'>Tombol Standar</a>
4. TOMBOL BULAT 3D
<a class='tombol bulat'>Tombol bulat</a>
5. TOMBOL BESAR & BULAT
<a class='tombol besar bulat'>Tombol Besar & Bulat</a>
INGAT BILA MENGGUNAKAN DI POSTINGAN BLOG UBAH COMPOSE MENJADI MODE HTML UNTUK PENERAPAANYA :)
Cukup Sekian Semoga Tombol Ini Dapat Menghiasi Blog Anda Sekian Dan Terima kasih :)
SUMBER SCRIPT : http://blog.kangrian.com/
Published By:
Tsani Aziz | Jika Ingin Copas Tolong Sertakan Sumber Di Bawah ini
Terimah Kasih telah membaca artikel
Cara Membuat Tombol Responsive Dan 3D seperti Kang Rian. Yang ditulis oleh Tsani Aziz .Pada hariSelasa, 30 Desember 2014. Jika anda ingin sebarluaskan artikel ini, mohon sertakan
sumber link asli. Kritik dan saran dapat anda sampaikan melalui kotak komentar Dan Jika Anda Memberi Like/Share Saya Sangat Berterima Kasih. Sekian Trimakasih ^_^