Animasi Klik Button Dengan Javascript dan CSS

Haloo teman-teman Dumet School, pada kesempatan kali ini saya akan membuat Animasi Klik Button Dengan Javascript dan CSS. Dimana ketika saya melakukan klik pada tombol maka animasi tombol yang akan tampil adalah animasi tombol berbalik dengan tombol yang lain. Untuk langkah pertama dalam membuat Animasi Klik Button Dengan Javascript dan CSS yaitu teman-teman buat terlebih dahulu struktur htmlnya. Siapkan dua buah div class untuk tombol seperti berikut ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animasi Klik Button Dengan Javascript dan CSS</title>
</head>
<body>
    <div class="btn">
  <div class="btn-back">
    <p>Apakah yakin ingin menghapus data ini?</p>
    <button class="yes">Ya</button>
    <button class="no">Tidak</button>
  </div>
  <div class="btn-front">Hapus</div>
</div>
</body>
</html>

Jika sudah maka tahap selanjutnya teman-teman buat style css di file yang sama dengan html.

    <style>
     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
 html, body {
     width: 100%;
     height: 100%;
     margin: 0;
     user-select: none;
}
 body {
     display: flex;
     font-family: Roboto, "Helvetica Neue", sans-serif;
     font-size: 18px;
     perspective: 1000px;
     background-color: #f5f5f5;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
 .description {
     margin-top: 50px;
     text-align: center;
     color: #999;
     transition: opacity 0.3s ease;
}
 .description a {
     color: #4a9df6;
     text-decoration: none;
}
 .btn.is-open ~ .description {
     opacity: 0;
}
 .btn {
     display: block;
     position: relative;
     width: 200px;
     height: 80px;
     transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     transform-style: preserve-3d;
     transform-origin: 50% 50%;
     text-align: center;
}
 .btn-front {
     position: absolute;
     display: block;
     width: 100%;
     height: 100%;
     line-height: 80px;
     background-color: #f44336;
     color: #fff;
     cursor: pointer;
     backface-visibility: hidden;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
 .btn-front:hover {
     background-color: #f77066;
}
 .btn.is-open .btn-front {
     pointer-events: none;
     line-height: 160px;
}
 .btn-back {
     position: absolute;
     width: 100%;
     height: 100%;
     background-color: #eee;
     color: #222;
     transform: translateZ(-2px) rotateX(180deg);
     overflow: hidden;
     transition: box-shadow 0.8s ease;
}
 .btn-back p {
     margin-top: 27px;
     margin-bottom: 25px;
}
 .btn-back button {
     padding: 12px 20px;
     width: 30%;
     margin: 0 5px;
     background-color: transparent;
     border: 0;
     border-radius: 2px;
     font-size: 1em;
     cursor: pointer;
     -webkit-appearance: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     transition: background 0.15s ease;
}
 .btn-back button:focus {
     outline: 0;
}
 .btn-back button.yes {
     background-color: #2196f3;
     color: #fff;
}
 .btn-back button.yes:hover {
     background-color: #51adf6;
}
 .btn-back button.no {
     color: #2196f3;
}
 .btn-back button.no:hover {
     background-color: #ddd;
}
 .btn.is-open .btn-back {
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
 .btn[data-direction="left"] .btn-back, .btn[data-direction="right"] .btn-back {
     transform: translateZ(-2px) rotateY(180deg);
}
 .btn.is-open {
     width: 400px;
     height: 160px;
}
 .btn[data-direction="top"].is-open {
     transform: rotateX(180deg);
}
 .btn[data-direction="right"].is-open {
     transform: rotateY(180deg);
}
 .btn[data-direction="bottom"].is-open {
     transform: rotateX(-180deg);
}
 .btn[data-direction="left"].is-open {
     transform: rotateY(-180deg);
}
 
    </style>

Dan tahap terakhir teman-teman buat file baru dengan nama animasi.js yang berisi javascript untuk membuat animasi kliknya agar dapat berjalan. 

  
var btn = document.querySelector( '.btn' );

var btnFront = btn.querySelector( '.btn-front' ),
    btnYes = btn.querySelector( '.btn-back .yes' ),
    btnNo = btn.querySelector( '.btn-back .no' );

btnFront.addEventListener( 'click', function( event ) {
  var mx = event.clientX - btn.offsetLeft,
      my = event.clientY - btn.offsetTop;

  var w = btn.offsetWidth,
      h = btn.offsetHeight;
    
  var directions = [
    { id: 'top', x: w/2, y: 0 },
    { id: 'right', x: w, y: h/2 },
    { id: 'bottom', x: w/2, y: h },
    { id: 'left', x: 0, y: h/2 }
  ];
 
  directions.sort( function( a, b ) {
    return distance( mx, my, a.x, a.y ) - distance( mx, my, b.x, b.y );
  } );
 
  btn.setAttribute( 'data-direction', directions.shift().id );
  btn.classList.add( 'is-open' );

} );

btnYes.addEventListener( 'click', function( event ) {    
  btn.classList.remove( 'is-open' );
} );

btnNo.addEventListener( 'click', function( event ) {
  btn.classList.remove( 'is-open' );
} );

function distance( x1, y1, x2, y2 ) {
  var dx = x1-x2;
  var dy = y1-y2;
  return Math.sqrt( dx*dx + dy*dy );
}    
   

Dan tahap terakhir teman-teman panggil  filenya di html seperti berikut ini.

<script src="animasi.js"></script>

Demikian artikel tentang cara  Animasi Klik Button Dengan Javascript dan CSS. Semoga dapat bermanfaat dan selamat mencoba.