BOUNCE BUTTON effect on hover
HTML code:-
CSS code:-
HTML code:-
<!DOCTYPE html>
<html>
<head>
<title>Bounce
button hover effect</title>
</head>
<body>
<button
class="bounce">
BOUNCE
</button>
</body>
</html>
|
CSS code:-
body
{
align-items:
center;
justify-content:
center;
display: flex;
height: 90vh;
background:#222;
}
.bounce {
height: 50px;
font-size: 20px;
justify-content:
center;
width: 120px;
background-color:
blue;
border-radius:
10px;
border:none;
}
.bounce:hover {
animation:
bounce 1s;
}
@keyframes bounce {
30%
{
transform:translateY(-30px);
}
40%{
transform:translateY(0px);
}
60% {
transform:translateY(-20px);
}
80% {
transform:translateY(0px);
}
}
|
0 Comments