Membuat button cantik dengan css

ASSALAMUALAIKUM :D, hari ini saya akan share cara membuat button dengan css , ok langsung saja :
1. Loggin ke dasboard blogger anda ,Klik menu Template lalu klik Edit HTML.

2. Cari kata ]]></b:skin> dengan menggunakan Ctrl+F
3. Salin CSS di bawah dan paste tepat di bawah kode ]]></b:skin>

<style type='text/css'>
/* Button
----------------------------------------------- */
.button {
  background-color: rgb(240, 240, 240);
  background-image: -moz-linear-gradient(center top , rgb(249, 249, 249), rgb(240, 240, 240));
  border: 1px solid rgb(211, 211, 211) !important;
  border-radius: 3px 3px 3px 3px !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08) !important;
  color: rgb(85, 85, 85) !important;
  display: inline-block;
  font-family: &quot;OpenSansBold&quot;,&quot;Segoe UI&quot;,calibri,sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  height: 20px;
  line-height: 12px !important;
  margin: 0 5px 20px !important;
  padding: 8px 10px 0 !important;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.button:hover {
  background-color: rgb(249, 249, 249);
  background-image: -moz-linear-gradient(center top , rgb(240, 240, 240), rgb(249, 249, 249));
text-decoration: none;
}
.button.black {
  background-color: rgb(68, 68, 68);
  background-image: -moz-linear-gradient(center top , rgb(93, 93, 93), rgb(68, 68, 68));
  border: 1px solid rgb(76, 76, 76) !important;
  color: rgb(255, 255, 255) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}
.button.black:hover {
  background-color: rgb(93, 93, 93);
  background-image: -moz-linear-gradient(center top , rgb(68, 68, 68), rgb(93, 93, 93));
  text-decoration: none;
}
.button.blue {
  background-color: rgb(111, 206, 243);
  background-image: -moz-linear-gradient(center top , rgb(170, 228, 248), rgb(111, 206, 243));
  border: 1px solid rgb(141, 197, 218) !important;
  color: rgb(66, 120, 142) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.button.blue:hover {
  background-color: rgb(170, 228, 248);
  background-image: -moz-linear-gradient(center top , rgb(111, 206, 243), rgb(170, 228, 248));
  text-decoration: none;
}
</style>

4. Buat Mark up seperti di bawah saat menulis postingan :

<a class="button black" href="http://taufik090797.blogspot.com">
Test</a>
<a class="button blue" href="http://taufik090797.blogspot.com">
Test</a> 

5. Hasilnya akan seperti ini :

Test Test
Oke skian postingan saya kali ini semoga bermanfaat :)
WASSALAMMUALAIKUM WR.WB

Sumber : www.ariona.net