Membuat Komponen Alert Modern dengan HTML, CSS, dan JavaScript

Get Started > Details

Details
Code

Deskripsi.

Dalam tutorial ini, kita akan belajar membuat komponen alert modern menggunakan HTML, CSS, dan JavaScript vanilla. Alert ini dilengkapi animasi transisi halus saat ditutup, memberikan pengalaman pengguna yang lebih baik. Cocok digunakan untuk menampilkan notifikasi sukses, peringatan, info, dan bahaya di website Anda!

Pasang kode javascript di bawah </body>

document.querySelectorAll('.closebtn').forEach(button => {
  button.addEventListener('click', function() {
    const alertBox = this.parentElement;
    alertBox.style.opacity = '0';
    alertBox.style.transform = 'translateY(-10px)';
    setTimeout(() => alertBox.style.display = 'none', 400);
  });
});

Pasang kode css di dalam tag <b:skin><![CDATA[...]]></b:skin> atau <style>...</style>.

.alert{padding:15px;border-radius:8px;color:white;margin-bottom:15px;opacity:1;transform:translateY(0);transition:opacity 0.4s ease,transform 0.4s ease}
.alert.success{background-color:#04AA6D}
.alert.info{background-color:#2196F3}
.alert.warning{background-color:#ff9800}
.alert.danger{background-color:#f44336}
.closebtn{float:right;background:none;border:none;font-size:18px;cursor:pointer;color:white;transition:color 0.3s}
.closebtn:hover{color:black}

Dan untuk tag HTML yang digunakan

Success

<div class="alert success">
  <strong>Success!</strong> Text disini.
  <button class="closebtn">&times;</button>
</div>

Danger

<div class="alert danger">
  <strong>Danger!</strong> Text disini.
  <button class="closebtn">&times;</button>
</div>

Info

<div class="alert info">
  <strong>Info!</strong> Text disini.
  <button class="closebtn">&times;</button>
</div>

Warning

<div class="alert warning">
  <strong>Warning!</strong> Text disini.
  <button class="closebtn">&times;</button>
</div>

rasgane