Teknik CSS Button Dengan Efek Transition Hover

Untuk kali ini Blog Rudy hartono akan bahas tentang Custom button effect hover css transition. Tutorial untuk membuat tombol demo dan tombol download pernah juga saya share dengan versi lain, coba anda klik link ini tombol download dan tombol demo Tutorial yang ini akan lebih menarik karena dengan teknik dasar dari css transition yang akan digunakan pada tombol demo dan download. Teknik ini menggunakan image / gambar dengan animation transition. Kita mulai saja bagaimana cara membuatnya.

Untuk anda yang penasaran dan ingin membuatnya terlebih dahulu lihat demonya dengan mengklik tombol demo dibawah ini.

DEMO

Nah untuk membuat tombol demo dan tombol download efek transition hover, sebagai berikut :
1. Login ke Blogger
2. Pilih Templates => Lanjutkan
3. Pilih Edit HTML
4. Centang Expand Template Widget
5. Cari kode ]]</skin> dan letakkan kode css berikut diatas kode ]]</skin>

body {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhea-umcSQC6k74OIkvfv8g8KNh1UfVFmca0-1_cJIj3HLDsRb8RfK41zNwziNaRmoODEu9TxiXnulMWOQXJW_-EfKjymHsnrXORjnq7WNF8L8MsPwUz3iW-0A6Gbm5iYNBQELnEesMiEA/s1600/demo-1.png") repeat scroll 0 0 #EBEBEB;
    padding: 20px;
    word-wrap: break-word;
}
#button .icon {
  background:#E3E3E3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQvLscC1pRKgpVMIC3yw9vdRr9jxQWj6RZwqjo8pIQNnOsPQ9n-RBcbgBjXVDagat6mr-HA1SXcj4dgbczpiNhshsCRu7VwA_cjtCrPHlVkGGDc6g2vCG1CmdU6CK9X35uvtSH_s-XRYA/s1600/demo-2.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;
}

6. Selesai dan simpan template

Supaya kode tersebut bisa dioperasikan, maka coba anda buat satu postingan dan letakkan kode pemanggil CSS pada psosisi HTML (bukan Compose).

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

Untuk Download

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

Untuk Info

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

Keterangan :
1. Silahkan ubah teks yang berwarna merah dengan teks anda sendiri.
2. Silahkan ubah tanda pagar (#) yang berwarna merah dengan link download / demo anda.

Nah selamat mencoba tutorial CSS Button Dengan Efek Transition Hover, semoga bermanfaat dan happy blogging.