FLAHS BUTTON HOVER EFFECT USING PURE CSS
HTML code:-
<!DOCTYPE html>
<html>
<head>
<title>flash Button Hover effect</title>
</head>
<body>
<button
class="pl">
FLASH
</button>
</body>
</html>
|
Css code:-
body
{
align-items:
center;
justify-content:
center;
display: flex;
height: 90vh;
background:#222;
}
.pl {
height: 50px;
font-size: 20px;
justify-content:
center;
width: 120px;
background-color:
blue;
border-radius:
10px;
border:none;
}
.pl:hover {
animation: flash
1s;
}
@keyframes flash {
25%
{
opacity:
0;
}
50%{
opacity:
1;
}
75% {
opacity:
0;
}
100% {
opacity:
1;
}
}
|
0 Comments