Mas Uya

Halo semua,Pada malam hari ini saya akan share tutorial CSS Simple Button.
Banyak pengguna blogger yang ingin membuat button untuk demo dan download.
Nah untuk itu,Saya akan share CSS Simple Button,Kenapa?Ya karna penggunaannya sangat mudah..

Oke langsung saja kita mulai
Tutorial:
1.Login Ke Blogger
2.Masuk ke Template-Edit HTML
3.Taruh CSS ini tepat dibawah ]]></b:skin>

<style type='text/css'>
.prbt-1{ position:relative;  padding:10px 40px;  margin:0px 10px 10px 0px;  border-radius:15px;  font-family:'Arial',cursive;  font-size:25px;  float:left;  color:#FFF;  text-decoration:none;  -webkit-transition:all 0.1s;  -moz-transition:all 0.1s;  -ms-transition:all 0.1s;  -o-transition:all 0.1s;  transition:all 0.1s}
.prbt-1:active{top:5px; border-bottom:0px solid}
.bt1{background-color:#F2CF66; border-bottom:5px solid #D1B358; text-shadow:0px -2px #D1B358}
.bt2{ background-color:#3498DB;   border-bottom:5px solid #2980B9;   text-shadow:0px -2px #2980B9}
.bt3{ background-color:#E74C3C;   border-bottom:5px solid #BD3E31;   text-shadow:0px -2px #BD3E31}
.bt4{ background-color:#82BF56;   border-bottom:5px solid #669644;   text-shadow:0px -2px #669644}
.bt5{  background-color:#ff667a;   border-bottom:5px solid #ed4694;   text-shadow:0px -2px #ed4694}
.bt6{ background-color:#9b59b6;   border-bottom:5px solid #8e44ad;   text-shadow:0px -2px #8e44ad}
.bt7{ background-color:#f39c12;   border-bottom:5px solid #e67e22;   text-shadow:0px -2px #e67e22}
.bt8{ background-color:#34495e;   border-bottom:5px solid #2c3e50;   text-shadow:0px -2px #2c3e50}
</style>

4.Klik Simpan/Save Template
5.Belum Selesai Tutorialnya,Sekarang Kita Masuk Cara Penggunaan

Cara Penggunaan:
1.Buat Post Baru
2.Jika sudah,Jangan Di Publish dahulu karna belum selesai
3.Ubah Compose Menjadi HTML
4.Masukkan HTML berikut,Tepat diakhir post kalian

<div style="text-align: center;">
<a href="#" class="prbt-1 bt1">1</a>
<a href="#" class="prbt-1 bt2">2</a>
<a href="#" class="prbt-1 bt3">3</a>
<a href="#" class="prbt-1 bt4">4</a>
<a href="#" class="prbt-1 bt5">5</a>
<a href="#" class="prbt-1 bt6">6</a> 
<a href="#" class="prbt-1 bt7">7</a> 
<a href="#" class="prbt-1 bt8">8</a>
</div>

Demo