Banyak sobat blogger yang bertanya bagaimana cara membuat button .
Langsung saja kita praktekkan cara membuat button menggunakan CSS3
Berikut cara membuatnya :
Seperti biasa sobat harus login ke Blogger klik Rancangan klik Edit HTML.
Kemudian cari kode ]]></b:skin>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol (F3).
Jika sudah ketemu letakan kode CSS berikut diatas kode ]]></b:skin>
.button{
background-color:#fff;
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#cccccc));
background: -moz-linear-gradient(top, #f3f3f3, #cccccc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#cccccc');
color: #940f04;
color:rgba(0,0,0,0.9);
border:1px solid rgba(0,0,0,0.5);
-moz-border-radius:3px;
-webkit-border-radius:3px;
-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
padding: 3px;
padding-top:3px;
padding-bottom:3px;
margin-right:3px;
}
.button a, .button:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#f3f3f3));
background: -moz-linear-gradient(top, #cccccc, #f3f3f3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f3f3f3');
color:#000;
color:rgba(0,0,0,0.9);
border:1px solid rgba(0,0,0,0.5);
-moz-border-radius:3px;
-webkit-border-radius:3px;
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
text-decoration: none;
padding: 3px;
padding-top:3px;
padding-bottom:3px;
box-shadow: inset 0px 0px 5px #fbc26f;
-webkit-box-shadow: inset 0px 0px 5px #fbc26f;
-moz-box-shadow: inset 0px 0px 5px #fbc26f;
}
Keterangan : kode yang berwarna biru bisa sobat ganti sesuai selera
jika sudah selesai SIMPAN TEMPLATE.
kemudian untuk mengaplikasikannya sobat tinggal memanggil kode button diatas yaitu dengan cara menambahkan kode class="button"
berikut contohnya :
- contoh link tidak menggunakan button
<a href='http://deejayhan.blogspot.com/2012/04/membuat-button-menggunakan-css3.html">Membuat Button Menggunakan CSS3</a>
- Hasilnya akan tampak seperti di bawah
- contoh button tidak menggunakan link
<a href='#nogo'class="button">Membuat Button Menggunakan CSS3</a>
- Hasilnya akan tampak seperti dibawah
- contoh button yang menggunakan link
<a href='http://deejayhan.blogspot.com/2012/04/membuat-button-menggunakan-css3.html'class="button">Membuat Button Menggunakan CSS3</a>
- Hasilnya akan tampak seperti dibawah
Description: Membuat Button Menggunakan CSS3
