Current time: 07-17-2018, 01:21 AM Stay in touch via Twitter Facebook RSS Feed
Ada Baiknya anda baca Peraturan Forum ForNesia Disini Dan Disitu Sebelum Terlambat!
System Registration Forums Mulai Kedepan Sewaktu waktu akan Di Tutup.
Silahkan Dibaca Mengenai Auto Pruning User . Agar tidak ada pertanyaan lagi tentang kehilangan akses forum.



[Share] CSS Button Dengan Transition Hover Efect

09-27-2014 09:07 AM CSS Button Dengan Transition Hover Efect
#1


Auryn Away
Tukang Corat Coret
Design Moderators
*****

Posts: 887
Joined: Apr 2014

Reputation:

FCoin: 207.14ƒc
Graphics FreakExtreme Staff
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
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.
(This post was last modified: 09-27-2014 09:17 AM by Auryn.)
10-09-2014 02:10 PM RE: CSS Button Dengan Transition Hover Efect
#2


A.Ramadhani Away
HunteR
HunteR
*

Posts: 85
Joined: Sep 2014

Reputation:

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

:pendekar:
10-09-2014 02:33 PM RE: CSS Button Dengan Transition Hover Efect
#3


Auryn Away
Tukang Corat Coret
Design Moderators
*****

Posts: 887
Joined: Apr 2014

Reputation:

FCoin: 207.14ƒc
Graphics FreakExtreme Staff
(10-09-2014 02:10 PM)A.Ramadhani Wrote:  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. cool semga bermanfaat.
(This post was last modified: 10-09-2014 02:35 PM by Auryn.)
10-09-2014 03:02 PM RE: CSS Button Dengan Transition Hover Efect
#4


A.Ramadhani Away
HunteR
HunteR
*

Posts: 85
Joined: Sep 2014

Reputation:

FCoin: 2.18ƒc
(10-09-2014 02:33 PM)Auryn Wrote:  
(10-09-2014 02:10 PM)A.Ramadhani Wrote:  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. cool 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??

:pendekar:
10-09-2014 05:05 PM RE: CSS Button Dengan Transition Hover Efect
#5


Auryn Away
Tukang Corat Coret
Design Moderators
*****

Posts: 887
Joined: Apr 2014

Reputation:

FCoin: 207.14ƒc
Graphics FreakExtreme Staff
(10-09-2014 03:02 PM)A.Ramadhani Wrote:  
(10-09-2014 02:33 PM)Auryn Wrote:  
(10-09-2014 02:10 PM)A.Ramadhani Wrote:  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. cool 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. Smile
10-09-2014 05:57 PM RE: CSS Button Dengan Transition Hover Efect
#6


A.Ramadhani Away
HunteR
HunteR
*

Posts: 85
Joined: Sep 2014

Reputation:

FCoin: 2.18ƒc
(10-09-2014 05:05 PM)Auryn Wrote:  
(10-09-2014 03:02 PM)A.Ramadhani Wrote:  
(10-09-2014 02:33 PM)Auryn Wrote:  
(10-09-2014 02:10 PM)A.Ramadhani Wrote:  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. cool 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. Smile

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.

:pendekar:
10-09-2014 06:36 PM RE: CSS Button Dengan Transition Hover Efect
#7


Auryn Away
Tukang Corat Coret
Design Moderators
*****

Posts: 887
Joined: Apr 2014

Reputation:

FCoin: 207.14ƒc
Graphics FreakExtreme Staff
(10-09-2014 05:57 PM)A.Ramadhani Wrote:  
(10-09-2014 05:05 PM)Auryn Wrote:  
(10-09-2014 03:02 PM)A.Ramadhani Wrote:  
(10-09-2014 02:33 PM)Auryn Wrote:  
(10-09-2014 02:10 PM)A.Ramadhani Wrote:  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. cool 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. Smile

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
10-11-2014 01:11 AM RE: CSS Button Dengan Transition Hover Efect
#8


A.Ramadhani Away
HunteR
HunteR
*

Posts: 85
Joined: Sep 2014

Reputation:

FCoin: 2.18ƒc
maaf kang filenya gak bisa d download katanya "Cannot decrypt metadata without key"
alternatiflain gak kang???

:pendekar:
10-11-2014 06:47 PM RE: CSS Button Dengan Transition Hover Efect
#9


Auryn Away
Tukang Corat Coret
Design Moderators
*****

Posts: 887
Joined: Apr 2014

Reputation:

FCoin: 207.14ƒc
Graphics FreakExtreme Staff
(10-11-2014 01:11 AM)A.Ramadhani Wrote:  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
10-11-2014 11:15 PM RE: CSS Button Dengan Transition Hover Efect
#10


A.Ramadhani Away
HunteR
HunteR
*

Posts: 85
Joined: Sep 2014

Reputation:

FCoin: 2.18ƒc
(10-11-2014 06:47 PM)Auryn Wrote:  
(10-11-2014 01:11 AM)A.Ramadhani Wrote:  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???

:pendekar:
02-13-2015 12:15 AM RE: CSS Button Dengan Transition Hover Efect
#11


jaylani Away
HunteR
HunteR
*

Posts: 35
Joined: Jan 2014

Reputation:

FCoin: 1.95ƒc
wah keren banget , ane mau coba tapi masih banyak belajar
06-15-2015 03:14 PM RE: CSS Button Dengan Transition Hover Efect
#12


vhooo Away
HunteR
HunteR
*

Posts: 40
Joined: Jun 2015

Reputation:

FCoin: 2.10ƒc
ini hover slide y..
demo gk ada soal'x..
bisa di gabung dgn bostrap..

vhooo, proud to be a member of ForNesia Family since Jun 2015.




Search thread:


[-]
Advertisement