CSS Button Dengan Efek Transition Hover

Custom Button dengan effect hover css transition animation kali ini kami share dengan beberapa teknik dasar dari css transition dan teknik ini bagus untuk semua browser pendukung. kegunaanya adalah membuat sebuah tombol download dan tombol demo dengan menarik. biasanya tombol button hanya di asumsikan dengan beberapa teknik warna,border,shadow,dan hover, namun kali ini kita akan gunakan image sprite dengan animation transiion.

jika kalian suka silahkan pasang pada blog anda.

Lihat Demo

Pertama Pasang CSS dulu pada template anda dengan mencari code ]]</skin> dan Simpan CSS di atasnya.

jika sudah simpan template anda.

body {
    background: url("https://lh6.googleusercontent.com/-e0_3IuBZwgs/TyvWQEKqSzI/AAAAAAAAF_w/fuoTc-tNh2Y/d/refreshbg.png") repeat scroll 0 0 #EBEBEB;
    padding: 20px;
    word-wrap: break-word;
}
#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;
}

Pemanggilan CSS ke HTML.

buat sebuah postingan dan sisipkan code HTML berikut sesuai kegunaannya.

pergantian class dengan demo,download dan info.

Untuk DEMO

<div id="button">
    <a href="#" class="icon demo"><span>Lihat Demo</span></a>
</div>

Untuk Download

<div id="button">
    <a href="#" class="icon download"><span>Lihat Demo</span></a>
</div>

Untuk Informasi

<div id="button">
    <a href="#" class="icon info"><span>Lihat Demo</span></a>
</div>

---

Post By : Ana Silvana

Button Generator : 3 Tool CSS