Cara Merubah Tombol Saat Di Hover Pada HTML
Dalam panduan ini, Anda dapat mengetahui cara melakukan pemudaran lembut di antara dua warna saat mengarahkan kursor ke tombol.
Dalam contoh tombol kami, kami dapat mengubah latar belakang tombol kami dengan menentukan warna latar belakang yang berbeda untuk
:hoverkelas semu dinamis.
Namun, mengarahkan kursor ke tombol akan menyebabkan warna latar berubah menjadi warna baru. Untuk membuat perubahan yang lebih lembut di antara keduanya,
kita bisa menggunakan CSS Transitions.
Menggunakan transisi Setelah menambahkan warna yang diinginkan untuk status melayang,
tambahkan transitionproperti ke aturan untuk tombol.
Untuk transisi sederhana, nilai dari transition adalah nama properti atau beberapa properti yang Anda inginkan untuk diterapkan pada transisi ini,
dan waktu yang diperlukan untuk transisi tersebut.
Untuk kelas :activeand :focuspseudo,
transitionproperti disetel ke none,
sehingga tombol terkunci ke status aktif saat diklik.
Dalam contoh transisi membutuhkan waktu 1 detik,
Anda dapat mencoba mengubahnya untuk melihat perbedaan
yang dihasilkan oleh perubahan kecepatan.
<div class="wrapper">
<button class="fade">Downloads Disini</button>
</div>
<style>
.fade {
background-color: #25D366;
color: #fff;
transition: background-color 0.3s;
padding: 20px;
border-radius: 5px;
}
.fade:hover {
background-color: #128C7E;
}
.fade:focus,
.fade:active {
background-color: #34B7F1;
transition: none;
}
<div class="wrapper">
<button class="fade">Downloads Disini</button>
</div>
<style>
.fade {
background-color: #25D366;
color: #fff;
transition: background-color 0.3s;
padding: 20px;
border-radius: 5px;
}
.fade:hover {
background-color: #128C7E;
}
.fade:focus,
.fade:active {
background-color: #34B7F1;
transition: none;
}
</style></div>
3 komentar