Sexy & Cuties Button For Blog

Hanya ilustrasi

Sexy & Cuties Button For Blog - Baru kali ini saya bikiin judul kayak begitu itu ... Hmmh saya pikir bosen banget yah kalau misalnya bikin judul tuh yang Cara Membuat Tombol Download , atau Cara Mudah Membuat Tombol dengan Css3 gitu gitu ... Kesannya kaku banget .

Nah berhubung sekarang ini saya lagi rada error nih jadi kayak begitu dah bikin judulnya .

Well , mo bahas apa kita ? Langsung download script aja apa gimana nih ? atau pake tutor segala ?
Aduh saya bukakn ahli css dan html apalagi javascript ... Tapi sebisanya saja lah saya kasih petunjuknya biar pangjang  .
Ini Button saya nemu dari blog sebelah dan saya pikir ini tombol keren banget , lucu gitu warnanya .
Contohnya begini nih ...

Button Text

Ingin bikin yang seperti itu ? Masih ada lagi niiih ... :P
Button Text Button Text Button Text Button Text Button Text

Oke lah langsung saja kita mulai dari Css nya .

Css

.SRB{ background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.SRB a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.SRB a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }
.SRB a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }
.SRB a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }
.SRB a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }
.SRB a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }
.SRB a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }
.SRB a:hover, .SRB:hover { color: #fff; opacity: .7 }

Letakkan Css diatas di dalam template anda , tepatnya di atas ]]></b:skin>

Kemudian untuk menampilkan Sexy Button tersebut , kita perlu memangilnya dengan menambahkan Class "SRB" pada span dan Css warna pada a misal "green"

Lengkapnya begini ...

Green Button 

<span class="SRB"><a class="green" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Orang Button

<span class="SRB"><a class="green" href="#" rel="nofollow" target="_blank"> Button Text </a></span> 

Red Button

<span class="SRB"><a class="red" href="#" rel="nofollow" target="_blank"> Button Text </a></span> 

Blue Button

<span class="SRB"><a class="blue" href="#" rel="nofollow" target="_blank"> Button Text </a></span> 

Gray Button

<span class="SRB"><a class="gray" href="#" rel="nofollow" target="_blank"> Button Text </a></span> 

Dark Button

<span class="SRB"><a class="dark" href="#" rel="nofollow" target="_blank"> Button Text </a></span> 

 Anda masih bisa menambahkan beberapa style warna pada css dengan menambahkan Css lagi ,
Misal anda akan membuat button warna ungu , maka tambahkan Css berikut dibawah kode css tadi dalam template .

.SRB a.purple { background: ##A901F0; background: linear-gradient(top, ##A901F0 0%, #7101A0 100%); background: -moz-linear-gradient(top, ##A901F0 0%, #7101A0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,##A901F0), color-stop(100%,#7101A0)); background: -webkit-linear-gradient(top, ##A901F0 0%,#7101A0 100%); }

Dan untuk memanggilnya tinggal gunakan class purple seperti dibawah ini . Untuk mengganti warna Css anda bisa menggunakan Tool Color Picker .

<span class="SRB"><a class="purple" href="#" rel="nofollow" target="_blank"> Button Text </a></span>  

Dan hasilnya
Button Text

Untuk memberi link pada tombol ini ganti saja kode "#" dengan link tujuan .
Cukup mudah ? Iyalah mudah orang tinggal pake :D .

Dan kemudahan itu hanya untu anda .... Plak .

Dan itu dia Sexy & Cuties Button For Blog yang mungkin bisa anda gunakan sebagai tombol download atau tombol tombol lainnya . Sekian dan salam :P