how to make bounce button effect on hover using html and css

BOUNCE BUTTON effect on hover










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);
                }
}








Post a Comment

0 Comments