Penulis Hallo sobat, tutorial Blogger kali ini Saya akan sharing cara membuat tombol / button yang keren dengan teknik CSS dan cara pasang tombol / button css di blog atau web.
Fungsi tombol / button pada blog atau website kerap digunakan untuk tombol demo, tombol download, spoiler dan banyak lagi.
Ada banyak bentuk maupun warna dari modifikasi sebuah button atau tombol, ada banyak pula teknik dari pembuatan button pada blog.
Anda dapat membuat tombol / button dengan menggunakan image atau gambar sebagai background button, atau dengan cara lain yang lebih simple dan tidak memerlukan image apapun yaitu mengimplementasikan dasar-dasar CSS untuk membuat tombol keren dan cantik dengan gradient, lengkungan border sampai text shadow. Hal ini dapat diterapkan dengan teknik kode CSS3 yang kompatible terhadap beberapa browser utama seperti firefox, chrome dan safari.
Pada tip dan trik membuat Tombol / Button keren Dengan CSS ini, saya mengajak Anda untuk mencoba memanfaatkan sebuah tool css code generator. Dengan cara yang mudah, simple dan relatif cepat Anda bisa membuat aneka bentuk dengan tampilan button / tombol yang cantik dan keren.
CSS Button www.cssbuttongenerator.com adalah website yang menyediakan alat css button generator gratis yang memungkinkan Anda membuat bermacam-macam button / tombol yang cantik dan keren sesuai selera. Ada yang menarik dalam pembuatan button dengan CSS ini, yaitu :
• pure atau total menggunakan CSS, tanpa image (gambar) maupun Javascript.
• lebih fleksibel dan scalable, dapat menyesuaikan ukuran tombol, font, warna, border, gradient color, dll.
• memiliki 3 state, yaitu Normal, Hover dan Active.
• dapat diimplementasikan pada berbagai element HTML, diantaranya: a, input, button, span, div, p, h3, dsb.
• standard browser compatible, loading lebih cepat karena imageless (noimage required).
Gambar contoh tombol / button diatas menunjukkan bahwa banyak yang kita bisa lakukan dalam pembuatan button dengan menggunkan CSS Button Generator. Dengan cara mudah Anda bisa merubah tampilan baik ukuran, warna background, gradient, border, border radius atau rounded, shadow, text shadow dan lainnya, semua bisa dapat diatur sesuai selera. Sebelum memulai membuat button / tombol yang keren dengan CSS , ada baiknya untuk melihat dan memahami gambar area kerja di CSS Button Generator dibawah ini :
Pada gambar diatas ada 3 area kerja di CSS Button Generator yaitu :
• area setting :
“ disini Anda bisa mengatur css button mulai pemberian nama button (classnname) pada CSS class name mengatur ukuran text dan jenis font, nama judul button pada Button Tex mengatur border size, border radius (rounded), box shadow, efek inset, text shadow, blur radius, spread radius, dll.
• area preview :
“ hasil tampilan button yang telah diatur di area setting, tampilan button akan terlihat di area preview ini klik pada tombol / button di area ini untuk generated code CSS atau code css button yang telah dibuat
• are code css
“ disini Anda bisa copy semua code css button tadi untuk ditampilkan di blog maupun di website
Cara Pemasangan Css Button pada Blog
Implemetasi atau pemasangan tombol / button css ini juga sangat mudah, Anda copy code css yang telah dibuat di area code css, kemudian pastekan diatas kode tag "]]></b:skin>" pada template blog.
1. masuk Blogger >>> pilih Template >>> Edit HTML.
2. tekan F3 >>> cari code ]]></b:skin>
3. kemudian Save Template.
contoh kode css button:
.classname { -moz-box-shadow:inset 0px 1px 0px 0px #cae3fc; -webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc; box-shadow:inset 0px 1px 0px 0px #cae3fc; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) ); background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee'); background-color:#79bbff; -webkit-border-top-left-radius:20px; -moz-border-radius-topleft:20px; border-top-left-radius:20px; -webkit-border-top-right-radius:20px; -moz-border-radius-topright:20px; border-top-right-radius:20px; -webkit-border-bottom-right-radius:20px; -moz-border-radius-bottomright:20px; border-bottom-right-radius:20px; -webkit-border-bottom-left-radius:20px; -moz-border-radius-bottomleft:20px; border-bottom-left-radius:20px; text-indent:0; border:1px solid #469df5; display:inline-block; color:#ffffff; font-family:Verdana; font-size:15px; font-weight:bold; font-style:normal; height:25px; line-height:25px; width:92px; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #287ace; } .classname:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff'); background-color:#4197ee; }.classname:active { position:relative; top:1px; }
Untuk pemakaian button css pada blog, pada postingan, atau widget dengan menggunakan kode HTML tersebut:
<a href="#" class="classname">BUTTON</a>
note: untuk metode penulisan di post editor pada mode HTML
Dengan demikian tentunya Anda belum benar-benar puas sebelum mencobanya dan membuktikan sendiri, betapa mudahnya membuat Tombol / Button Keren Dengan CSS. Ayo coba membuatnya sendiri dan nikmati hasilnya, button kreasi Anda sendiri tentunya lebih mengasyikkan.
EmoticonEmoticon