Membuat Efek Hover Sederhana Pada Teks

Membuat Efek Hover Sederhana Pada Teks – Pada artikel kali ini akan membahas bagaimana membuat afek hover sederhana pada teks. Implementasi dilakukan menggunakan HTML dan CSS. Pada html akan dibuat teks yang berisi tulisan “teks 1” dan saat kursor berada pada area teks akan berubah menjadi “teks 2”. Implementasi membuat efek hover sederhana pada teks dapat disimak sebagai berikut.

 

body {
  background: #000000;
  padding: 32px;
}

.text-link {
  display: block;
  position: relative;
  font-weight: bold;
  font-size: 16px;
  line-height: 14px;
  color: #FFFFFF;
  text-decoration: none;
  transition: 250ms ease;
}

.text-link:hover {
  padding-bottom: 32px;
  color: transparent;
}

.text-link:hover::after {
  color: #279DFF;
  transform: translateY(-40px);
  opacity: 1;
}

.text-link::after {
  content: attr(data-link-text);
  position: absolute;
  left: 0;
  bottom: -120%;
  width: 100%;
  height: 100%;
  transition: 350ms ease;
  opacity: 0;
}

 

<html>
<head>
  <title>Efek Hover Pada Teks</title>
</head>
<body>
  <a href="#" class="text-link" data-link-text="Teks 2">
    <span>Teks 1</span>
  </a>
</body>
</html>

Hasil efek hover dapat dilihat pada JSFiddle berikut.

Sekian artikel mengenai kali ini, nantikan artikel menarik lainnya hanya di Inpows.

Avatar
Temukan kode-kode Java, Kotlin, Python dan bahasa pemrograman lainnya hanya di www.inpows.com. Kontak: editor@inpows.com
Back To Top