Berbagai Macam Pilihan Tombol Button Untuk Blog

Pada postingan ini saya akan share berbagai macam tombol button untuk blog memang sudah banyak sekali pariasi tombol button yang dipakai oleh para blogger namun tidak ada salahnya anda mencoba tombol button ini,untuk langkahnya

Silahkan masuk blog anda
pilih menu template
kemudian cari kode ]]></b:skin>
jika sudah ketemu letakan kode dibawah ini diatasnya

a.button {
 padding: 10px;
 text-decoration: none;
 font-weight: bold;
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.2);
 position: relative;
 margin: 10px;
 display: inline-block;
 
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 
 background-image: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.1) 100%);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.1)));
 background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.1) 100%);
 background-image: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.1) 100%);
 background-image: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.1) 100%);
 background-image: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d000000', endColorstr='#1a000000',GradientType=0 ); 
 background-color: #B9B9B9;
}

a.button:after {
 content: '';
 position: absolute;
 width: 100%; height: 100%;
 left: -4px; top: -4px;
 padding: 4px;
 z-index: -1;
 background: #eee;
 
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: inset 0 0 0 1px #e1e1e1;
 -moz-box-shadow: inset 0 0 0 1px #e1e1e1;
 box-shadow: inset 0 0 0 1px #e1e1e1;
}
a.button:hover {
 background-image: none;
}
a.button:active {
 background-image: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0)));
 background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
 background-image: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
 background-image: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
 background-image: linear-gradient(top bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d000000', endColorstr='#00000000',GradientType=0 );
}

a.button.orange {
 background-color: #FD5B01;
}
a.button.red {
 background-color: #FD0113;
}
a.button.pink {
 background-color: #FD01B6;
}
a.button.purple {
 background-color: #8201FD;
}
a.button.blue {
 background-color: #0180FD;
}
a.button.lightblue {
 background-color: #01E1FD;
}
a.button.green {
 background-color: #A2D111;
}
a.button.lightgreen {
 background-color: #01FDA1;
}
a.button.yellow {
 background-color: #FDD301;
}
a.button.black {
 background-color: #000;
}

 Untuk pemakaiannya seperti ini

<a class="button" href="#">Button </a> 

 Untuk kode berwarna merah sobat bisa menggantinya dengan " button orange " atau pilihan warna lain dan untuk kode berwarna biru adalah url tujuan dan nama anda bisa menggantinya dengan " Demo " atau lain sebagainya...

Untuk penjelasannya saya kira sudah cukup jelas selamat mencoba semoga bermanfaat...