Search JavaScript Kit:

This free script provided by
JavaScript Kit

Cara Memasang Efek Slide Transition Mouseover Cantik di Blog


Berikut ini saya coba sharing cara memasang tombol dengan efek slide transition dengan beberapa teknik dasar dari css transition dan tentunya support untuk semua browser pendukung. Adapun gunanya adalah membuat sebuah tombol DOWNLOAD, DEMO dan INFO terlihat cantik dan unik.Karena selama ini tombol tersebut hanya diasumsikan dengan beberapa teknik seperti warna, border, shadow dan hover namun pada posting kali ini menggunakan image sprite dengan animation transition.
Maka jika sobat tertarik dan suka, silahkan ambil dan pasang di Blognya masing-masing.

Caranya :

1. Copy dan Paste-kan kode CSS dibawah ini diatas kode ]]></skin> kemudian simpan template sobat

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;
}

2. Lakukan pemanggilan CSS dengan menempatkan kode dibawah ini pada postingan sobat
 
    * DOWNLOAD
     
       <div id="button">
               <a href="URL LINK" class="icon download"><span>Lihat DOWNLOAD</span></a>
       </div>

    * DEMO
     
       <div id="button">
               <a href="URL LINK" class="icon demo"><span>Lihat DEMO</span></a>
       </div>

     * INFO
 
       <div id="button">
               <a href="URL LINK" class="icon info"><span>Lihat INFO</span></a>
       </div>
   
      [ Keterangan kode : Ganti URL LINK dengan URL tujuan ]

3. Lihat DEMO

Semoga bermanfaat.

0 komentar:

Post a Comment

No spam...