Button animation adalah teknik animasi yang diterapkan pada tombol atau button di halaman web menggunakan kombinasi HTML dan CSS. Tujuannya adalah untuk menambahkan efek visual pada tombol yang memberikan umpan balik atau feedback kepada pengguna saat tombol tersebut diklik atau diarahkan.
Beberapa jenis animasi yang umum diterapkan pada button antara lain:
1.Hover Animation: animasi yang terjadi saat kursor mouse mengarah ke tombol.
2.Click Animation: animasi yang terjadi saat tombol ditekan.
3.Loading Animation: animasi yang terjadi saat proses loading atau pengiriman data.
4.Pulse Animation: animasi yang memberikan efek pulsasi atau denyut pada tombol.
Contoh dasar implementasi button animation pada HTML dan CSS dapat dilihat pada kode-kode berikut:
<button class="btn btn-primary hover-animation">Klik Saya</button>
<style> .btn {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
}
.hover-animation:hover {
transform: scale(1.1);
}
</style>Pada contoh di atas, tombol "Klik Saya" akan mengalami efek scaling atau perbesaran saat kursor mouse diarahkan ke atasnya, karena diterapkan class "hover-animation" yang menentukan transformasi pada tombol saat diberikan pseudo-class ":hover".
Contoh Video Complete bervariasi animation button HTML & CSS :