Efek Hover pada Button dengan CSS

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 :)