Cara Membuat Fading Button

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

by Hanifah Nurbaeti January 29, 2021

Di bawah ini kita akan mempelajari cara membuat tombol fading dengan CSS. Fading button sendiri berasal dari kata “Fade” yang artinya memudar. Jadi, Fading Button merupakan tombol atau button yang menggunakan efek memudar(fade).

Fading Button

Contoh Fade In Effect
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>Contoh Fading Buttons - "Fade in Effect"</h2>

<button class="btn">Arahkan Kursor Ke Sini</button>

</body>
</html>

Contoh Fade Out Effect
Fade out 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: 1;
  transition: 0.3s;
}

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

<h2>Contoh Fading Buttons - "Fade out Effect"</h2>

<button class="btn">Arahkan Kursor Ke Sini</button>

</body>
</html>

Contoh Fade Backgroud Effect
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>Contoh Fading Buttons - "Fade in Effect"</h2>

<button class="btn">Arahkan Kursor Ke Sini</button>

</body>
</html>