Membuat Button Menggunakan CSS3

Assalamualaikum,,

Hai Sobat BMCyber, huh 2 baru bisa Share hari teman soalnya kemaren2 lagi test, Oke langsung saja oh yah saya berterima kasih dulu sama bang Deejyan yang telah memberi Ilmunya tentang Membuat Button Menggunakan CSS3

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;
}

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>

contoh button tidak menggunakan link

<a href='#nogo'class="button">Membuat Button Menggunakan CSS3</a>

contoh button yang menggunakan link

<a href='http://bmcyber.blogspot.com/2012/04/membuat-button-menggunakan-css3.html'class="button">Membuat Button Menggunakan CSS3</a>

Hasil menggunakan Button dan link

Membuat Button Menggunakan CSS3

Related Post