Membuat Buttons Hover Effect Sederhana
Hai sobat komputer kali akan kita bahas mengenai bagaimana sih membuat button hover effect sederhana. Seperti biasanya kali ini saya menggunakan HTML dan CSS saja. Langsung saja ikuti langkah-langkah dibawah guys jangan lupa teliti ya :D
Pertama kita buat terlebih dahulu file .html dan .css
kemudian edit file .htmlnya masukkan code dibawah ini ya guys,
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hover Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="middle">
<button class="btn btn1">Hover Me</button>
<button class="btn btn2">Hover Me</button>
</div>
</body>
</html>
selanjutnya yang perlu kita lakukan adalah membuat style dari pada button hovernya dengan mengcopy code di bawah ini guys,
body{
margin: 0;
padding: 0;
background: url(bg.jpg);
background-size: cover;
}
.middle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.btn{
background: none;
border: 2px solid skyblue;
font-family: "montserrat",sans-serif;
text-transform: uppercase;
padding: 12px 20px;
min-width: 200px;
margin: 10px;
cursor: pointer;
transition: color 0.4s linear;
position: relative;
}
.btn:hover{
color: #fff;
}
.btn::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: skyblue;
z-index: -1;
transition: transform 0.5s;
transform-origin: 0 0;
transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
}
.btn1::before{
transform: scaleX(0);
}
.btn2::before{
transform: scaleY(0);
}
.btn1:hover::before{
transform: scaleX(1);
}
.btn2:hover::before{
transform: scaleY(1);
}
Untuk warna border cari code dibawah ini pada file style.css tepatnya di .btn dan ganti skyblue dengan warna yang kalian inginkan guys.
Dan untuk mengganti warna background buttons hovernya kalian biasa edit code dibawah ini dan seperti mengganti warna border tinggal kalian ganti skyblue dengan nama warna yang kalian inginkan.border: 2px solid skyblue;
Untuk video lengkapnya bisa kalian tonton di bawah ya, Sekian artikel yang bisa saya sampaikan sampai jumpa di artikel selanjutnya ya guys.background: skyblue;
0 Response to "Membuat Buttons Hover Effect Sederhana"
Post a Comment