Hallo sobat program, bertemu lagi dengan saya Rizal dan masih diwebsite dumetschool yang sangat bermanfaat ini. Pada kesempatan kali ini saya akan memberikan tips dan tutorial dalam membuat hover background. Maka judul pembahasan kali ini saya berikan judul Cara Membuat Hover Background-color dengan HTML CSS.
Hal pertama yang terbenak dalam hati dan fikiran saya adalah saat saya ingin menghover sebuat text yang sudah saya modifikasi menjadi sebuah tombol button namun disitu munculah perasaan ingin yang dihover itu adalah sebuah background-color dan setelah saya searching sana sini akhirnya dapat pencerahan dari codepen.io dalam membuatnya.
Oke tanpa basa basi lagi mari langsung saja kita mulai untuk mencoba Cara Membuat Hover Background-color dengan HTML CSS. Nantinya disini kita memanfaatkan pseudo element serta animation pada CSS.
Langsung saja langkah pertama jalankan/run text-editornya lalu kemudian ketiklah script HTML seperti pada contoh dibawah ini :
<center>
<div class="container">
<a>Muhamad Rizal Hidayat</a>
</div>
</center>
Langkah selanjutnya, silahkan ketik script CSS nya seperti pada contoh dibawah ini :
body {
background: #34495e;
color: white;
font-size: 35px;
font-family: sans-serif;
}
a{
cursor: pointer;
}
.container {
position: relative;
display: inline-block;
padding: 10px;
margin-top: 50px;
}
.container:after {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background: #070000; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #070000, #4C0001, #070000); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #070000, #4C0001, #070000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
z-index: -1;
content: '';
}
.container:hover::after {
animation: bg-animasi 1s;
animation-fill-mode: backwards;
}
@keyframes bg-animasi {
0% {
width: 100%;
}
100% {
width: 0%;
}
}
body {
background: #34495e;
color: white;
font-size: 35px;
font-family: sans-serif;
}
a{
cursor: pointer;
}
.container {
position: relative;
display: inline-block;
padding: 10px;
margin-top: 50px;
}
.container:after {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background: #070000; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #070000, #4C0001, #070000); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #070000, #4C0001, #070000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
z-index: -1;
content: '';
}
.container:hover::after {
animation: bg-animasi 1s;
animation-fill-mode: backwards;
}
@keyframes bg-animasi {
0% {
width: 100%;
}
100% {
width: 0%;
}
}
Jika sudah kedua script diatas maka langkah berikutnya silahkan teman-teman simpan dan coba dijalankan dibrowser yang teman-teman gunakan.
Kalau berhasil maka hasilnya akan sesuai seperti pada contoh gambar dibawah ini :
Dari hasil diatas itu saya membuat ketika cursor mendekati objek maka animasi background warna dari kanan ke kiri akan dijalankan, kurang lebihnya seperti itu hehe.
Oke kalau begitu cukup sekian dipembahasan kali ini tentang Cara Membuat Hover Background-color dengan HTML CSS. Semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.
TERIMA KASIH