Cara Memberikan Transisi Saat Melakukan Hover

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 9, 2021

Di bawah ini kita akan mempelajari cara menambahkan transisi saat mengarahkan kursor pada elemen dengan CSS.

Transisi Saat Hover

Transisi CSS dapat digunakan untuk mengubah nilai properti dari satu nilai ke nilai lainnya selama durasi tertentu. Di bawah ini ada contoh untuk membuat transisi dengan efek Fade in dan Fade background saat melakukan hover :

Tambahkan efek transisi (opasitas dan warna latar belakang) ke tombol di hover:

Contoh
Fade in saat hover:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
}

.btn:hover {opacity: 1}
</style>
</head>
<body>

<h2>Fading Buttons - "Fade in Effect"</h2>
  <p>Arahkan kursor ke button yang ada di bawah untuk melihat efeknya</p>

<button class="btn">Hover Over Me</button>

</body>
</html>

Contoh
Fade background saat hover:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
}

.btn:hover {
  background-color: #f4511e;
  color: white;
}
</style>
</head>
<body>

<h2>Fading Buttons - "Fade in Effect"</h2>
  <p>Arahkan kursor ke button yang ada di bawah untuk melihat efeknya</p>

<button class="btn">Hover Over Me</button>

</body>
</html>