PHP

Efek Hover Dinamis pada Underline Link dan Button Menggunakan HTML, CSS, dan JavaScript

Home » Post » Efek Hover Dinamis pada Underline Link dan Button Menggunakan HTML, CSS, dan JavaScript

Efek Hover Dinamis pada Underline Link dan Button Menggunakan HTML, CSS, dan JavaScript

Table of contents



Efek Hover Dinamis pada Underline Link dan Button Menggunakan HTML, CSS, dan JavaScript - Efek hover merupakan salah satu elemen kecil dalam desain antarmuka web yang sering kali dianggap sepele. Padahal, jika dirancang dengan baik, hover dapat meningkatkan pengalaman pengguna secara signifikan. Umumnya, hover hanya menampilkan satu warna tetap. Namun, pendekatan tersebut cenderung monoton, terutama pada website dengan konsep modern dan interaktif.

Pada artikel ini akan dibahas penerapan efek hover dinamis, di mana warna underline pada link serta background pada button berubah setiap kali pengguna melakukan hover, lalu kembali ke kondisi awal saat pointer dilepas. Sederhana, tetapi cukup efektif untuk memberikan kesan interaktif tanpa terlihat berlebihan.

Konsep Dasar Efek Hover Dinamis

Secara garis besar, konsep yang digunakan cukup sederhana:



  • CSS berfungsi untuk mengatur tampilan visual dan transisi hover.
  • JavaScript digunakan untuk mencatat urutan hover dan menentukan warna yang akan ditampilkan.
  • Perilaku hover dibuat konsisten:
    • Hover masuk → efek muncul
    • Hover keluar → efek menghilang
    • Hover berikutnya → warna berbeda

Dengan pendekatan ini, setiap elemen memiliki perilaku mandiri dan tidak saling memengaruhi. Praktis dan mudah dikembangkan.

Underline Link dengan Warna Berubah

Pada link navigasi atau teks interaktif, underline sering digunakan sebagai penanda bahwa elemen tersebut dapat diklik. Dengan menambahkan variasi warna pada setiap hover, underline tidak hanya berfungsi sebagai indikator, tetapi juga memberikan sentuhan visual yang lebih dinamis.

Efek ini sangat cocok diterapkan pada:

  • Menu navigasi
  • Link artikel
  • Footer link
  • Elemen teks interaktif lainnya

Secara UX, perubahan warna yang muncul hanya saat hover tetap aman dan tidak mengganggu fokus pengguna. Intinya, terlihat hidup tanpa terasa ramai.

Baca juga: Dasar - Dasar HTML

Button dengan Background Color Dinamis

Berbeda dengan link, button lebih ideal menggunakan perubahan background color daripada underline. Konsepnya tetap sama: warna background muncul saat hover, lalu kembali normal ketika hover dilepas.

Pendekatan ini membuat button terasa:

  • Lebih responsif
  • Lebih modern
  • Lebih “terasa hidup” saat disentuh

Sedikit catatan santai di sini: efek seperti ini sering kali tidak disadari secara sadar oleh pengguna, tetapi justru itulah kekuatannya memberikan kesan profesional tanpa harus terlihat mencolok.

Menu Navigation

Kapan Efek Ini Sebaiknya Digunakan?

Efek hover dinamis sebaiknya digunakan secara selektif.

Disarankan untuk:

  • Call To Action (CTA)
  • Menu navigasi utama
  • Website kreatif, portfolio, atau landing page

Sebaiknya dihindari pada:

  • Website formal pemerintahan
  • Aplikasi dengan fokus tinggi pada data
  • Halaman dengan kepadatan interaksi tinggi

Dengan kata lain, gunakan efek ini sebagai aksen, bukan sebagai elemen utama.

Tips Implementasi yang Aman

Agar efek hover tetap nyaman digunakan, perhatikan beberapa hal berikut:

  • Batasi jumlah warna agar tidak terlihat berlebihan
  • Pastikan kontras warna tetap terbaca
  • Gunakan transisi yang halus dan tidak terlalu cepat
  • Konsisten antara link dan button
  • Uji pada berbagai ukuran layar dan perangkat
  • Sedikit sentuhan saja sudah cukup, tidak perlu berlebihan.

CSS

.nav {
  display: flex;
  gap: 30px;
}

.nav {
  display: flex;
  gap: 30px;
  padding: 40px;
}

.nav-link {
  position: relative;
  text-decoration: none;
  color: #333;
  font-size: 18px;
  padding-bottom: 6px;
}

/* underline default (hidden) */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background-color: var(--u-color, blue);
  transition: width 0.25s ease;
}

/* muncul saat hover */
.nav-link:hover::after {
  width: 100%;
}

HTML

<nav class="nav">
  <a href="#" class="nav-link">Home</a>
  <a href="#" class="nav-link">About</a>
  <a href="#" class="nav-link">Services</a>
  <a href="#" class="nav-link">Contact</a>
</nav>

<script>
   const colors = ["blue", "yellow", "green", "red"];

document.querySelectorAll(".nav-link").forEach(link => {
  let hoverCount = 0;

  link.addEventListener("mouseenter", () => {
    const color = colors[hoverCount % colors.length];
    link.style.setProperty("--u-color", color);
    hoverCount++;
  });
});

document.querySelectorAll(".color-btn").forEach(btn => {
  let hoverCount = 0;

  btn.addEventListener("mouseenter", () => {
    const color = colors[hoverCount % colors.length];
    btn.style.setProperty("--bg-color", color);
    hoverCount++;
  });
});

</script>

Kesimpulan

Efek hover dinamis pada underline link dan button merupakan teknik sederhana yang mampu meningkatkan kualitas interaksi pada website. Dengan memanfaatkan kombinasi HTML, CSS, dan JavaScript, efek ini dapat diterapkan tanpa ketergantungan pada library tambahan.

Lihat Demo / Contoh Penerapan

Jika digunakan secara tepat, hover dinamis mampu memberikan pengalaman pengguna yang lebih baik, modern, dan profesional dengan bonus: tidak membosankan.

Apabila Anda ingin versi lanjutan, seperti integrasi ke WordPress atau project website tertentu, silakan beri tahu. Saya siap membantu.

 


Artikel Terkait