Membuat Animasi Underline menarik dengan CSS

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

 

 

 

17 Januari 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat