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