09-27-2014, 08:07 AM
Review
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 teman2 fornesia sekalian. monggo Disimak langkah2 berikut ini.
1. Kita pasang Dlu kode css nya, tepat diatas kode ]]</skin> caranya dengan ctrl+f dan masukkan kode tersebut.
2.paste-kan kode css berikut ini
3.Setelah Dipastekan Mari Kita Coba Memanggil Kodenya Dengan Cara membuat sebuah Post Atau page,
caranya : masuk ke dashbord >> newpost (Pada Tutor ini Saya menggunakan post)
4.masuk kedalam tab html , letaknya sebelahan sama tab compose.
5.pada tab html mari kita masukkan kode.berikut ini untuk memanggilnya.
- untuk tombol demo
-Untuk Tombol Download
-Untuk Tombol Informasi
6. nah jangan lupa setelah dipastekan langsung diisi halaman linknya misal : <a href="www.fornesia.com" kalo ga diisi hover transision tidak berfungsi.kalo males ngisi tinggal di ganti <a href="#"
7.nah itu tadi Sedikit Pengembangan CSS yang bisa membatu kita dalam mempercantik blog kita.
semoga bermanfaat.
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 teman2 fornesia sekalian. monggo Disimak langkah2 berikut ini.
1. Kita pasang Dlu kode css nya, tepat diatas kode ]]</skin> caranya dengan ctrl+f dan masukkan kode tersebut.
2.paste-kan kode css berikut ini
Code:
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;
}
3.Setelah Dipastekan Mari Kita Coba Memanggil Kodenya Dengan Cara membuat sebuah Post Atau page,
caranya : masuk ke dashbord >> newpost (Pada Tutor ini Saya menggunakan post)
4.masuk kedalam tab html , letaknya sebelahan sama tab compose.
5.pada tab html mari kita masukkan kode.berikut ini untuk memanggilnya.
- untuk tombol demo
Code:
<div id="button">
<a href="#" class="icon demo"><span>Lihat Demo</span></a>
</div>
-Untuk Tombol Download
Code:
<div id="button">
<a href="#" class="icon download"><span>Lihat Demo</span></a>
</div>
-Untuk Tombol Informasi
Code:
<div id="button">
<a href="#" class="icon info"><span>Lihat Demo</span></a>
</div>
6. nah jangan lupa setelah dipastekan langsung diisi halaman linknya misal : <a href="www.fornesia.com" kalo ga diisi hover transision tidak berfungsi.kalo males ngisi tinggal di ganti <a href="#"
7.nah itu tadi Sedikit Pengembangan CSS yang bisa membatu kita dalam mempercantik blog kita.
semoga bermanfaat.