How to Create Different Animation on Button on Hover Using HTML and CSS Only .

Hello Everyone, In this Post We Will be Seeing How to Create Different Animation on Button on Hovering Using HTML and CSS only.

Here is The Live Link of Page https://button-animation.netlify.app/

Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/

Follow Me on Github https://www.github.com/ajaysharma12799/

Steps to Create :-

Choose Any Text Editor (VSCode Recommended).
Create 2 Files in Current Project Directory, index.html and style.css.
Use Below HTML and CSS Code To Build Your Page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Design Animations</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="heading">
            Different Hover Animation on Buttons
        </div>
        <div class="buttons">
            <button class="btn1">Slide From Left</button>
            <button class="btn2">Slide From Right</button>
            <button class="btn3">Slide From Top</button>
            <button class="btn4">Slide From Bottom</button>
            <button class="btn5">Glow Animation</button>
        </div>
    </div>
</body>
</html>

:root {
    --primaryColor: #ff96ad;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.heading {
    font-weight: lighter;
    font-size: 30px;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 5%;
}
.buttons {
    display: grid;
    justify-content: center;
    align-items: center;
}
button {
    width: 250px;
    height: 50px;
    font-size: 20px;
    font-weight: lighter;
    text-align: center;
    cursor: pointer;
    border: 0;
    transition: 0.5s ease-in;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.btn1, .btn2, .btn3, .btn4, .btn5 {
    margin-bottom: 10px;
}
.btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover, .btn5:hover {
    color: #fff;
}
button::before, button::after {
    content: "";
    background-color: var(--primaryColor);
    position: absolute;
    z-index: -1;
}

/* Button 1 */
.btn1::after {
    width: 0;
    left: 0;
    top: 0;
    height: 100%;
    transition-duration: 0.5s;
}
.btn1:hover::after {
    width: 100%;
}

/* Button 2 */
.btn2::after {
    width: 0;
    top: 0;
    right: 0;
    height: 100%;
    transition-duration: 0.5s;
}
.btn2:hover::after {
    width: 100%;
}

/* Button 3 */
.btn3::after {
    height: 0;
    left: 0;
    top: 0;
    transition-duration: .5s;
    width: 100%;
}
.btn3:hover::after {
    height: 100%;
}
/* Button 4 */
.btn4::after {
    height: 0;
    bottom: 0;
    left: 0;
    transition-duration: 0.5s;
    width: 100%;
}
.btn4:hover::after {
    height: 100%;
}

/* Button 5 */
.btn5:hover {
    background-color: var(--primaryColor);
    color: #fff;
    box-shadow: 0 0 5px var(--primaryColor), 0 0 200px var(--primaryColor);
}

Blog

How to Create Different Animation on Button on Hover Using HTML and CSS Only .

Ajay Sharma

Join Our Newsletter. No Spam, Only the good stuff.

Related