Blog Request tutorial? klik disini!

  • Efek Hover Pada Button Dengan CSS

    Ditulis oleh: Aulia Rahmah Alhafidz
    3641 kali dibaca
    04 Jul / 2014 15:36

    Hai semua, hari ini kita akan membuat efek untuk tombol. Efek apa? Hem, begini jika kita hover tombol tersebut, kita akan melihat efek yang unik dan menarik tentunya. Ada banyak sekali efek yang bisa kita buat, tetapi kali ini saya akan tampilkan 3 efek saja. Seperti apa tampilan dan efeknya? Langsung saja yuk!

    See the Pen wLpJB by Dumet_School (@dumet_school) on CodePen.

    Pada type 1, pada tag <span> kita melihat ada 2 kata "Flip". Untuk apa fungsinya? Coba kita hover, pada saat di hover, akan muncul bacaan lain yang datang dari atas. Bisa terlihat ada 2 kata "Flip" bukan? Nah, untuk itulah ada 2 kata "Flip".

    Pada type-3, ada 3 kata "Open". Nah, sama seperti type 1, tetapi karena pada saat dihover terbuka keatas dan kebawah, maka kita membutuhkan 3 kata "Open".

    Pada type-8, ada tag <span> yang tidak ada katanya. Apa fungsinya? Perhatikan pada saat kita hover type-8, akan ada kotak-kotak biru yang datang tapi tidak bersamaan bukan? Masing-masing kotak itu mewakili tag <span></span>.

    Nah, begitulah scriptnya, semoga bermanfaat yaa :)






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155