[Auryn]

Review

[Image: review_hover.jpg]
Lihat Demo

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.

[A.Ramadhani]

maaf kang ... klo untuk css k jquery apa bisa??
terus klo pkai css kita psang d web ap gk berat webnya??

[Auryn]

maaf kang ... klo untuk css k jquery apa bisa??
terus klo pkai css kita psang d web ap gk berat webnya??

jwab satu2 yoo,
1.
Ente : klo untuk css k jquery apa bisa??
Im : Digabungkah ? ato dikonversi ? (tlong lebih spesifik.)

2.
Ente : klo pkai css kita psang d web ap gk berat webnya??
Im : Gini, menurut saya namanya namanya css ga terlepas dari web programming, namun css sendiri bisa diminimalisir agar tidak menggangu peforma website, misal banyaknya enter dalam css jga berpengaruh terhadap peforma, solusinya kita bisa pake CSS compresor , (bnyak tersedia di situs2 css compresor online).
note : Loading website berat enggaknya bkan hnya karena css tetapi jga dapat dpngaruhi banyak faktor. #udahkayakdosengini gw. semga bermanfaat.

[A.Ramadhani]

maaf kang ... klo untuk css k jquery apa bisa??
terus klo pkai css kita psang d web ap gk berat webnya??

jwab satu2 yoo,
1.
Ente : klo untuk css k jquery apa bisa??
Im : Digabungkah ? ato dikonversi ? (tlong lebih spesifik.)

2.
Ente : klo pkai css kita psang d web ap gk berat webnya??
Im : Gini, menurut saya namanya namanya css ga terlepas dari web programming, namun css sendiri bisa diminimalisir agar tidak menggangu peforma website, misal banyaknya enter dalam css jga berpengaruh terhadap peforma, solusinya kita bisa pake CSS compresor , (bnyak tersedia di situs2 css compresor online).
note : Loading website berat enggaknya bkan hnya karena css tetapi jga dapat dpngaruhi banyak faktor. #udahkayakdosengini gw. semga bermanfaat.

di gabungkan kang .. maaf gk spesifik
soalnya ane pngen bkin webb sma mke jquery tpi msih blom bisa, tpi tutornya blum ktmu yang pas ...

brti cssnya harus sesuai dn tidak berlebihan y kang??

[Auryn]

maaf kang ... klo untuk css k jquery apa bisa??
terus klo pkai css kita psang d web ap gk berat webnya??

jwab satu2 yoo,
1.
Ente : klo untuk css k jquery apa bisa??
Im : Digabungkah ? ato dikonversi ? (tlong lebih spesifik.)

2.
Ente : klo pkai css kita psang d web ap gk berat webnya??
Im : Gini, menurut saya namanya namanya css ga terlepas dari web programming, namun css sendiri bisa diminimalisir agar tidak menggangu peforma website, misal banyaknya enter dalam css jga berpengaruh terhadap peforma, solusinya kita bisa pake CSS compresor , (bnyak tersedia di situs2 css compresor online).
note : Loading website berat enggaknya bkan hnya karena css tetapi jga dapat dpngaruhi banyak faktor. #udahkayakdosengini gw. semga bermanfaat.

di gabungkan kang .. maaf gk spesifik
soalnya ane pngen bkin webb sma mke jquery tpi msih blom bisa, tpi tutornya blum ktmu yang pas ...

brti cssnya harus sesuai dn tidak berlebihan y kang??

iya css dan jquery bisa jalan, memang itu yang sering di pake. , yap bener banget gunain cssnya seperlunya aja.. kalo bisa diminimalisir tapi enak diliad. biar webnya nanti jadi resposive n elegant.

[A.Ramadhani]

maaf kang ... klo untuk css k jquery apa bisa??
terus klo pkai css kita psang d web ap gk berat webnya??

jwab satu2 yoo,
1.
Ente : klo untuk css k jquery apa bisa??
Im : Digabungkah ? ato dikonversi ? (tlong lebih spesifik.)

2.
Ente : klo pkai css kita psang d web ap gk berat webnya??
Im : Gini, menurut saya namanya namanya css ga terlepas dari web programming, namun css sendiri bisa diminimalisir agar tidak menggangu peforma website, misal banyaknya enter dalam css jga berpengaruh terhadap peforma, solusinya kita bisa pake CSS compresor , (bnyak tersedia di situs2 css compresor online).
note : Loading website berat enggaknya bkan hnya karena css tetapi jga dapat dpngaruhi banyak faktor. #udahkayakdosengini gw. semga bermanfaat.

di gabungkan kang .. maaf gk spesifik
soalnya ane pngen bkin webb sma mke jquery tpi msih blom bisa, tpi tutornya blum ktmu yang pas ...

brti cssnya harus sesuai dn tidak berlebihan y kang??

iya css dan jquery bisa jalan, memang itu yang sering di pake. , yap bener banget gunain cssnya seperlunya aja.. kalo bisa diminimalisir tapi enak diliad. biar webnya nanti jadi resposive n elegant.

okeyy ane praktekin kang .. tapi ad referensi tambahan gak kang buat ane biar bisa bljar css sama jquery, soalnya sudah cari2 tpi blom ad yg pham

Terima Kasih.

[Auryn]

maaf kang ... klo untuk css k jquery apa bisa??
terus klo pkai css kita psang d web ap gk berat webnya??

jwab satu2 yoo,
1.
Ente : klo untuk css k jquery apa bisa??
Im : Digabungkah ? ato dikonversi ? (tlong lebih spesifik.)

2.
Ente : klo pkai css kita psang d web ap gk berat webnya??
Im : Gini, menurut saya namanya namanya css ga terlepas dari web programming, namun css sendiri bisa diminimalisir agar tidak menggangu peforma website, misal banyaknya enter dalam css jga berpengaruh terhadap peforma, solusinya kita bisa pake CSS compresor , (bnyak tersedia di situs2 css compresor online).
note : Loading website berat enggaknya bkan hnya karena css tetapi jga dapat dpngaruhi banyak faktor. #udahkayakdosengini gw. semga bermanfaat.

di gabungkan kang .. maaf gk spesifik
soalnya ane pngen bkin webb sma mke jquery tpi msih blom bisa, tpi tutornya blum ktmu yang pas ...

brti cssnya harus sesuai dn tidak berlebihan y kang??

iya css dan jquery bisa jalan, memang itu yang sering di pake. , yap bener banget gunain cssnya seperlunya aja.. kalo bisa diminimalisir tapi enak diliad. biar webnya nanti jadi resposive n elegant.

okeyy ane praktekin kang .. tapi ad referensi tambahan gak kang buat ane biar bisa bljar css sama jquery, soalnya sudah cari2 tpi blom ad yg pham

Terima Kasih.

kalo refernsi cukup dasar2 aja om, klo konsepnya udah mantap, pasti untuk pengembangan ke css3/ css tingkat lanjut bisa lebih mudah.
ini ada tutorial yang pernah saya pelajarin dlu sputaran css walaupun jadul tapi cukup penting buat matengin konsepnya. kalo jquerynya bisa sambil jalan.

Spoiler:

Register or login to see this content

[A.Ramadhani]

maaf kang filenya gak bisa d download katanya "Cannot decrypt metadata without key"
alternatiflain gak kang???

[Auryn]

maaf kang filenya gak bisa d download katanya "Cannot decrypt metadata without key"
alternatiflain gak kang???

ini om...

Register or login to see this content

[A.Ramadhani]

maaf kang filenya gak bisa d download katanya "Cannot decrypt metadata without key"
alternatiflain gak kang???

ini om...

terima kasih bnyak sdh mmbri referensinya kang ... dan mau mnjwab pertanyaan ane ...
sekali lagi terima kasih ... tpi kita msih bisa sharing kn ilmunya tntang web desain???

[jaylani]

wah keren banget , ane mau coba tapi masih banyak belajar

[vhooo]

ini hover slide y..
demo gk ada soal'x..
bisa di gabung dgn bostrap..