Expandable Button CSS For Blog

Expandable Button CSS For Blog,kalo di lihat dari arti kata Expandable berarti Dapat di perluas,maksudnya button ini mempunyai keunikan ketika tombol ini di sentuh mouse maka dengan sendirinya dia akan memberikan efek ke kiri dan kanan,unutk lebih jelasnya silahkan sobat lihat demonya.

Demo

buat yang mau coba silahkan ikuti tutorialnya di bawah ini.

1. Pastikan sobat dalam keadaan login.

2. Pilih menu Template > Edit HTML

3. Backup Dulu untuk menjaga kesalahan,kemudian centang Expand Widget Templates.

4. cari kode ]]></b:skin> dan letakn kode di bawah tepat di atas kode ]]></b:skin>

a.expand-button:link { color: #6E6E6E; 
font: bold 12px Helvetica, Arial, sans-serif; 
text-decoration: none; padding: 7px 12px; 
position: relative; display: inline-block; 
text-shadow: 0 1px 0 white; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: 
border-color .218s; transition:
border-color .218s; background: #F3F3F3; 
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1)); 
background: -moz-linear-gradient(linear,0% 40%,0% 70%,
from(whiteSmoke),to(#F1F1F1)); 
border: solid 1px gainsboro; 
border-radius: 2px; -webkit-border-radius: 2px; 
-moz-border-radius: 2px; margin-right: 10px; text-align: center; 
width: 70px; transition: width 1s; -moz-transition: width 1s; -webkit-transition: width 1s; -o-transition: width 1s; } 
a.expand-button:hover 
{ color: #333; border-color: #999; 
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) 
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); 
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); width: 160px;

5. Kemudian save.

Untuk penulisan dalam postingan gunakan kode di bawah

<a class="expand-button" href="#">Button Text</a>

Keterangan 
Yang bertanda # ganti dengan URL sesuai kebutuhan sobat.


Gimana mudah kan.selamat mencoba sobat semoga berhasil.

Bagikan Artikel ini