Cara Membuat Tombol Responsive Dan 3D seperti Kang Rian

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 . 

• Live Demo

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 :

1. Pilih Menu Template > Edit HTML
2. Taruh Kode Di Atas </style> atau diatas  ]]></b:skin>  gunakan tombol 
   Ctrl
   +
   F
   , untuk mempermudah  
3. 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 ^_^

<a href="http://juragandawet69.blogspot.com/2014/12/cara-membuat-tombol-responsive-dan-3d.html" target="_blank">Cara Membuat Tombol Responsive Dan 3D seperti Kang Rian</a>