Css Button Transition
Hi web developer! kesempatan kali ini saya mau buat tutorial gimana cara buat button dikala ada mouse hover warnanya sanggup berubah perlahan. Makara ada animasinya sedikit. kurang lebih tampilanya kayak gini.
Google
Pertama-tama buatlah struktur sederhana dari tag link.
Jangan lupa untuk menambahkan id pada button biar kita sanggup memakai css.
Buatlah style css sederhana untuk menciptakan sebuah button.
Buatlah style dikala terdapat mouse hover ke button tersebut
Tambahkan transition di button biasa dan hover. Ini akan menciptakan transisi dikala mouse hover maupun sebaliknya dikala meninggalkan button.
Pertama-tama buatlah struktur sederhana dari tag link.
<a id='cssbtn' href='https://www.google.com'>Google</a>
Jangan lupa untuk menambahkan id pada button biar kita sanggup memakai css.
Buatlah style css sederhana untuk menciptakan sebuah button.
<style>
#cssbtn{
padding:15px;
border-radius:10px;
background-color:orange;
color:white;
cursor:pointer;
}
</style>
#cssbtn{
padding:15px;
border-radius:10px;
background-color:orange;
color:white;
cursor:pointer;
}
</style>
Buatlah style dikala terdapat mouse hover ke button tersebut
<style>
#cssbtn:hover{
background-color:#4a4a4a;
}
</style>
#cssbtn:hover{
background-color:#4a4a4a;
}
</style>
Tambahkan transition di button biasa dan hover. Ini akan menciptakan transisi dikala mouse hover maupun sebaliknya dikala meninggalkan button.
<style>
#cssbtn{
padding:15px;
border-radius:10px;
background-color:orange;
color:white;
cursor:pointer;
transition:0.5s;
}
#cssbtn:hover{
background-color:#4a4a4a;
transition:0.5s;
}
</style>
CSS Transition berfungsi untuk menciptakan animasi dari perbedaan attribute yang ada. Kalian sanggup mencobanya sendiri dengan attribute lain mulai dari width, padding, margin, border-radius, dan lainnya. #cssbtn{
padding:15px;
border-radius:10px;
background-color:orange;
color:white;
cursor:pointer;
transition:0.5s;
}
#cssbtn:hover{
background-color:#4a4a4a;
transition:0.5s;
}
</style>
Penjelasan Kode:
padding Jarak dari border kedalam button
border-radius Membuat Button menjadi lebih
bundar (corner roundness)
background-color Warna dari button
color Warna tulisan
cursor Mengubah kursor menjadi mode
pointer (siap klik)
padding Jarak dari border kedalam button
border-radius Membuat Button menjadi lebih
bundar (corner roundness)
background-color Warna dari button
color Warna tulisan
cursor Mengubah kursor menjadi mode
pointer (siap klik)