KLIPING DUNIA: CSS Buttons With Transitional Hover Untuk Blogger

CSS3 Buttons With Transitional Hover Untuk Blogger

Button Transitional Hover adalah sebuah tombol yang berisikan link atau tidak pada blog baik itu tombol download, informasi, live demo maupun yang lainnya dengan efek hover atau bergerak pada saat tersentuh pointer mouse.

Tombol Transitional Hover ini sendiri adalah hasil dari modifikasi CSS3 dan tanpa ada tambahan Javascript maupun jQuery sehingga tidak mempengaruhi load time blog. Nah untuk melihat demo atau contohnya, silahkan mengklik link live demo di bawah.

LIVE DEMO

Cara memasang dan menggunakan tombol transitional

Pada dashboard, pilih Template » Edit HTML

Copy kode di bawah ini dan pastekan tepat di atas/sebelum tag ]]</skin>

#button .icon {

background:#E3E3E3 url('https://lh3.googleusercontent.com/--e_YVckfUbg/TyvWSQ-Sa3I/AAAAAAAAF_4/A6xydsmRC6E/d/refreshcode.png') 3px 0 no-repeat;

-moz-border-radius:10px;

-webkit-border-radius:10px;

-o-border-radius:10px;

border-radius:10px;

display:block;

color:#212121;

float:none;

height:80px;

width: 80px;

line-height:80px;

margin:10px auto 0;

padding-top:1px;

position:relative;

text-shadow:0 1px 0 #FAFAFA;

text-align:center;

text-decoration:none;

white-space:nowrap;

-webkit-transition:width .25s ease-in-out,

background-color .25s ease-in-out;

-ms-transition:width .25s ease-in-out,

background-color .25s ease-in-out;

-moz-transition:width .25s ease-in-out,

background-color .25s ease-in-out;

-o-transition:width .25s ease-in-out,

background-color .25s ease-in-out;

transition:width .25s ease-in-out,

background-color .25s ease-in-out;

-webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;

-moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;

-o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;

box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;

}

#button a span {

display:none;

}

#button:hover a span {

display:inline;

}

#button a span {

font-size:1.4em;

}

#button:hover .icon {

width:420px;

}

#button .demo {

background-position:0 -80px;

}

#button .info {

background-position:0 -160px;

}

#button .download {

background-position:0 0;

}

Simpan template.

Nah, untuk memasangnya pada postingan blog, pilih HTML (samping kanan compose) pada saat membuat postingan/artikel terbaru dan masukkan salah satu kode pemanggil di bawah ini :

Button Download