Membuat Animasi Underline menarik dengan CSS

17/01/2017    Maykhel David    1542     Website

Hallo semuanya, hari ini saya ingin membahas sebuah efek visual yang diterapkan pada underline atau garis bawah. Cara menciptakan efek ini sangat mudah, tidak memerlukan elemen DOM Javascript tambahan yang biasa ditambahkan pada HTML.

Hal pertama yang perlu kita lakukan adalah mematikan text-decoration, dan mengatur posisi link untuk relatif. Agar terlihat simple, kami juga akan memastikan link tidak berubah warna di hover. Di sini kita menerapkan efek untuk semua elemen link di dalamnya H2:

Selanjutnya, kita ingin menambahkan border, dan menyembunyikannya melalui transform. Kita melakukan ini dengan menempatakan before, dan menetapkan scaleX menjadi 0. untuk berjaga-jaga, kita menyembunyikannya dengan visibility: hidden untuk browser yang tidak mendukung animasi CSS.

Di bagian paling bawah kita hover  elemen untuk mengaktifkan transisi dengan durasi 0,3 detik. Untuk animasi muncul, sekarang kita hanya perlu membuat elemen terlihat lagi di hover, dan menetapkan scaleX kembali ke 1:

Baiklah teman-teman demikian artikel kali ini untuk lebih jelasnya kalian bisa lihat demo di bawah ini

 

 

 

HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More