Animasi CSS Link Hover Effects Underline

sukma
sukma
3 minute read

Pelajari cara membuat efek garis bawah animasi CSS link hover. Anda juga dapat menggunakan transisi ini untuk teks dan tombol. Ini keren dan sepenuhnya dapat disesuaikan.

Saya baru-baru ini mengerjakan situs web yang perlu menambahkan efek visual pada item menu navigasinya. Idenya adalah untuk membuat efek batas garis bawah yang terlihat saat melayang dengan animasi dan juga keluar dari tengah.

Sebelum saya menjelaskan lebih lanjut kepada Anda, Sekadar ingin menyebutkan di sini bahwa saya telah membuat beberapa Efek CSS Cool Link Hover yang mungkin menarik untuk Anda simak.

Bagaimanapun, untuk membuat efek seperti itu ternyata sangat mudah. Anda tidak perlu menambahkan tambahan Elemen DOM dan dapat menambahkan fallback untuk versi lama browser yang tidak mendukung animasi CSS3.

Kita dapat dengan mudah menambahkan efek garis bawah dengan menggunakan dekorasi teks dan itu akan bekerja dengan baik tetapi tidakkah menurut Anda itu terlihat membosankan?

Mengapa tidak memperbaikinya dengan menggunakan sedikit animasi CSS3? Ini tidak hanya akan terlihat bagus tetapi juga meningkatkan pengalaman pengguna dan menambah keindahan ekstra pada desain situs web Anda.

Cara Membuat Garis Bawah Efek Animasi Tautan Hover CSS

Untuk membuat efek garis bawah untuk tautan, Mari mulai dengan markup. Saya hanya akan menggunakan format HTML standar untuk menyiapkan daftar item.

Kami memiliki wadah kemudian daftar elemen unorder dan setiap elemen li menyimpan link.

<div class="underlineEffects">    <ul>       <li><a href="https://codeconvey.com/css-link-hover-effects-underline/#">About</a></li>       <li><a href="https://codeconvey.com/css-link-hover-effects-underline/#">Portfolio</a></li>       <li><a href="https://codeconvey.com/css-link-hover-effects-underline/#">Blog</a></li>       <li><a href="https://codeconvey.com/css-link-hover-effects-underline/#">Contact</a></li>     </ul> </div>

Gaya

Mari kita mulai dengan memberi gaya pada daftar yang tidak berurutan UL dan LI. Kami akan menerapkan gaya dasar untuk menjadikannya item daftar navigasi standar.

Demi kesederhanaan, kami menggunakan properti display, margin, dan text-align untuk membuatnya berada di tengah wadah. Kami juga menggunakan posisi relatif terhadap li sehingga kami dapat mengaturnya pada posisi normal.

.underlineEffects ul {   margin: 0 auto;   padding: 0;   list-style: none;   display: table;   text-align: center; } .underlineEffects li {   display: table-cell;   position: relative;   padding: 15px 0; }

Langkah kami selanjutnya untuk mematikan dekorasi teks pada tautan dan menambahkan beberapa gaya tambahan seperti warna, transformasi teks, dll.

.underlineEffects a {   color: #fff;   text-transform: uppercase;   text-decoration: none;   letter-spacing: 0.15em;   display: inline-block;   padding: 15px 20px;   position: relative; }

Sekarang kami ingin menambahkan batas bawah yang akan terlihat saat melayang. Kami akan melakukan ini dengan menggunakan warna latar belakang dan mengatur ketinggian dengan :after elemen. Agar terlihat bagus dan beranimasi, kita akan menggunakan properti transisi dengan lebar, posisi kiri dan nilai pengatur waktu.

.underlineEffects a:after {   background: none repeat scroll 0 0 transparent;   bottom: 0;   content: "";   display: block;   height: 2px;   left: 50%;   position: absolute;   background: #fff;   transition: width 0.3s ease 0s, left 0.3s ease 0s;   width: 0; }

Langkah terakhir kami untuk membuatnya berfungsi pada hover dan Anda tahu kami dapat melakukannya dengan mudah :hover elemen. Kami hanya akan mengatur lebarnya 100% dan nilai kiri akan menjadi nol.

.underlineEffects a:hover:after {   width: 100%;   left: 0; }

Itu dia. Solusi ini bekerja dengan hampir semua browser web dan Anda dapat menerapkannya di situs web produksi. Sedangkan untuk animasi, sekarang sudah didukung oleh Firefox tanpa menggunakan moz awalan sejak versi 16.0.