how to make button pulse effect on hover with css

PULSE BUTTON EFFECT ON HOVER











HTML code:-


<!DOCTYPE html>
<html>
<head>
                <title>pulese button hover effect</title>
</head>
<body>

                <button class="pulse">
                                PULSE
                </button>

</body>
</html>





Css code:-

                body {
                align-items: center;
                justify-content: center;
                display: flex;
                height: 90vh;
                background:#222;
}
.pulse {
                height: 50px;
                font-size: 20px;
                justify-content: center;
                width: 120px;
                background-color: blue;
                border-radius: 10px;
                border:none;
}
.pulse:hover {
                animation: pulse 2s;
}
@keyframes pulse {
                50%
                {
                                transform:scale(1.1);
                }
               
}







Post a Comment

0 Comments