CSS Button Dengan Efek Transition Hover

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

31 comments:

  1. Na aku pernah lihat di blog tune-up.. <3

    ReplyDelete
    Replies
    1. :D iia ka emang inspirasinya dari situ hehehe.. gak apa ya,, \o/

      Delete
    2. seep.. tak apa.. inspirasi bisa di mana saja.. :-d

      Delete
  2. udah saya coba di belog saiiah.... mantep..
    makasih yakk kang

    ReplyDelete
    Replies
    1. hehe.. sanes saya nu share.. tapi author yang satu lagi.. !! :D

      Delete
  3. owhh... nya sama wae meureun xixixix....
    kang, saiiah serius yeuh pengen kursus masalah css dan sebagainya sama akang... gmn cara na tah? :D

    ReplyDelete
    Replies
    1. wak kank.. saya belum masternya.. akang tinggal komentari saja tutorial yang di share.. nanti saya akan jelaskan jika ada yang belum di mengerti.. saya sendiri pelajari dasar css hampir semua dari W3school.org

      Delete
  4. hehehe saiiah juga sering kesana,, gada bahasa sunda euy xixix..
    okelah kalau begeto...
    ngemeng2... pasang banner boleh kang? :D

    ReplyDelete
    Replies
    1. hahaha... bahasa jawa adanya.. :D
      boleh... tinggal kirim link gambarnya

      Delete
  5. waduhh ada neng author..... kaburrr ahh.... xixixi
    kirim na kamana kang? email aja?

    ReplyDelete
  6. kang, mau nanya...
    kalo ngerapetin header sampe mentok gimana sih? udah utak atik ko ga bisa juga? :(

    ReplyDelete
  7. maksud nya biar gak ada jarak kang...

    http://i45.tinypic.com/2j1wznn.png

    ReplyDelete
    Replies
    1. ouh itu pengaturannya pada css body dan #outer-wrapper bukan pada headernya . jangan gunakan margin top dan bottom.. atau cari #outer-wrapper - margin: 10px auto; . hapus jadi 0 .
      untuk body padding dan margin pakai 0 saja.
      jika masih gagal gunakan css reset dari CSS Eric Meyer.

      Delete
  8. sudah di bikin 0 padding margin nya, tapi hanya bergeser sedikit saja...

    #kalo css meyer cara kerja na gmn ya gan?
    hadeuhhh oon yeuh kang.. :(

    ReplyDelete
    Replies
    1. kayanya saya harus lihat xml templatenya.. biasanya kalau edit css gagal,harus utak atik pada HTML juga..
      css mayer untuk mengubah default dari blogger.. banyak kok pengertian css reset di google selain dari eric meyer

      Delete
    2. mangga kang..

      https://www.box.com/s/ba16b34c02f0a0bc910f

      Delete
    3. ok kank saya akan check ,, nanti saya coba edit templatenya.. nanti malam saya kirim kembali.. sekarang malam mingguan dulu ach.. :D

      Delete
  9. siap grak...hatur nuhun sebelum \m/

    ReplyDelete
    Replies
    1. kang saya sudah edit remplatenya.. kesalahannya di bagian meta tag di bawah head.. kalau mau lihat hasilnya http://under-premium.blogspot.com/

      Delete
    2. teu ngarti kang....... :( @@,

      Delete
    3. hehhehehe..
      edit ulang meta tagnya.. kembalikan dulu ke standar.. atau ganti dengan ini..
      <head>
      <b:include data='blog' name='all-head-content'/>
      <title><data:blog.pageTitle/></title>
      <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
      <meta expr:content='data:blog.metaDescription' name='description'/>

      cara hapusnya.. pada bagian seperti ini
      <head>

      ...ganti semua meta tag yang ada di sini..

      <b:skin>

      NB : saya belum check satu-persatu jadi saya hapus semuanya.. :D
      kalau gak mau kembali ke standar coba hapus bagian ini saja.. itu kalau saya gak salah kang.
      tag ini :
      <head>
      <!-- hapus script yang ini -->
      <script src='//use.typekit.net/uwo0iso.js' type='text/javascript'/>
      <script type='text/javascript'>try{Typekit.load();}catch(e){}</script>
      <!-- meta tag lainnya -->
      ...meta tag jangan di hapus..

      <b:skin>


      NB : kank pindah tanya jawab ke Fun Page FB saya ya..

      Delete
    4. ouh ya satu lagi css pada template body atur seperti ini :
      body {
      background:url("https://lh6.googleusercontent.com/-e0_3IuBZwgs/TyvWQEKqSzI/AAAAAAAAF_w/fuoTc-tNh2Y/d/refreshbg.png") repeat #EBEBEB;
      padding:0 20px;
      margin:0;
      word-wrap:break-word;
      }

      Delete
    5. http://www.facebook.com/csstutsplus?ref=ts

      ini bukan kang fb fan page na? udah hadir :D

      Delete
    6. https://www.facebook.com/GTandUnder88 ini sob.. kan udah sering di like.. yang itu belum bisa buat di share.

      Delete
  10. ok kang, saya coba cari dolo kesalahannya yah...

    ReplyDelete
  11. Gan, ane mau ngedit gambar & ukuran button ini Gan. Ane udah nyoba ngutak-ngatik scriptnya, tapi hasilnya belum maksimal juga.

    Jadi, boleh saya tahu keterangan fungsi dari masing-masing script di atas ndak Gan? :D

    ReplyDelete
    Replies
    1. ukuran gambar 80x80 .. untuk posisi gambar harus mengerti dulu tentang penggunaan css sprite gambar... DISINI

      Delete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top