Open In App

How to create Hover animations on Button ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this project, we are going to create animated buttons using HTML and CSS. In these buttons when we hover over them an emoji get displayed on them for better UX.

A glimpse of the Buttons:

CDN Link: For button icons, we will use the fontawesome CDN link. Place this link in the script tag.

https://kit.fontawesome.com/704ff50790.js

HTML: Create an HTML file, then create the structure of all the buttons that will be a hover effect(switch to icon). Create a div container inside that container place all the buttons.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
</head>
 
<body>
    <div class="container">
        <div class="button-effect">
            <h2>Animated Buttons on Hover</h2>
            <a class="effect effect-4" href="#"
               title="Confirm Delivery">
                Confirm Delivery
            </a>
            <a class="effect effect-3" href="#"
               title="Download">Download</a>
            <a class="effect effect-2" href="#"
               title="Upload">Upload</a>
            <a class="effect effect-1" href="#"
               title="Delete">Delete</a>
            <a class="effect effect-5" href="#"
               title="Click Here to Message">
                Message
            </a>
        </div>
    </div>
    <script src=
    </script>
</body>
</html>


CSS: It is used to give different types of animations and effects to our HTML page so that it looks interactive to all users.   

  • Restore all the browser effects.
  • Use classes and ids to give effects to HTML elements.
  • Use @keyframes{} for giving the animation to HTML elements.
  • Use of nth-child selector feature of CSS to call different links.

CSS




body {
    background-color: black;
}
 
body .container {
    width: 850px;
    margin: 70px auto 0px auto;
    text-align: center;
}
 
body .container .button-effect {
    padding: 30px 0px;
}
 
body .container .button-effect h2 {
    font-family: "Droid Serif", serif;
    font-size: 20px;
    color: #fff;
    margin-bottom: 40px;
}
 
body .container .button-effect a {
    margin-right: 17px;
}
 
body .container .button-effect a:nth-child(2) {
    background-color: #520a8d;
}
 
body .container .button-effect a:nth-child(3) {
    background-color: #4d0325;
}
 
body .container .button-effect a:nth-child(4) {
    background-color: #09858a;
}
 
body .container .button-effect a:nth-child(5) {
    background-color: #e60d2a;
}
 
body .container .button-effect a:nth-child(6) {
    background-color: #c45f0d;
}
 
body .container .button-effect a:last-child {
    margin-right: 0px;
}
 
.effect {
    text-align: center;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #fff;
    text-transform: capitalize;
    /* background-color: - add your own background-color */
    font-family: "Roboto", sans-serif;
    /* put your font-family */
    font-size: 18px;
    padding: 20px 0px;
    width: 150px;
    border-radius: 6px;
    overflow: hidden;
}
 
/* effect-4 styles */
.effect.effect-4 {
    transition: all 0.2s linear 0s;
}
 
.effect.effect-4:before {
    content: "\f0d1";
    font-family: FontAwesome;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 30px;
    transform: scale(0, 1);
    transition: all 0.2s linear 0s;
}
 
.effect.effect-4:hover {
    text-indent: -9999px;
}
 
.effect.effect-4:hover:before {
    transform: scale(1, 1);
    text-indent: 0;
}
 
.effect.effect-3 {
    transition: all 0.2s linear 0s;
}
 
.effect.effect-3:before {
    content: "\f019";
    font-family: FontAwesome;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 30px;
    transform: scale(0, 1);
    transition: all 0.2s linear 0s;
}
 
.effect.effect-3:hover {
    text-indent: -9999px;
}
 
.effect.effect-3:hover:before {
    transform: scale(1, 1);
    text-indent: 0;
}
 
.effect.effect-2 {
    transition: all 0.2s linear 0s;
}
 
.effect.effect-2:before {
    content: "\f093";
    font-family: FontAwesome;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 30px;
    transform: scale(0, 1);
    transition: all 0.2s linear 0s;
}
 
.effect.effect-2:hover {
    text-indent: -9999px;
}
 
.effect.effect-2:hover:before {
    transform: scale(1, 1);
    text-indent: 0;
}
 
.effect.effect-1 {
    transition: all 0.2s linear 0s;
}
 
.effect.effect-1:before {
    content: "\f2ed";
    font-family: FontAwesome;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 30px;
    transform: scale(0, 1);
    transition: all 0.2s linear 0s;
}
 
.effect.effect-1:hover {
    text-indent: -9999px;
}
 
.effect.effect-1:hover:before {
    transform: scale(1, 1);
    text-indent: 0;
}
 
.effect.effect-5 {
    transition: all 0.2s linear 0s;
}
 
.effect.effect-5:before {
    content: "\f1d8";
    font-family: FontAwesome;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 30px;
    transform: scale(0, 1);
    transition: all 0.2s linear 0s;
}
 
.effect.effect-5:hover {
    text-indent: -9999px;
}
 
.effect.effect-5:hover:before {
    transform: scale(1, 1);
    text-indent: 0;
}


Complete Solution: In this section, we will put the above sections together and create attractive Hover animated buttons.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <style>
        body {
            background-color: black;
        }
 
        body .container {
            width: 850px;
            margin: 70px auto 0px auto;
            text-align: center;
        }
 
        body .container .button-effect {
            padding: 30px 0px;
        }
 
        body .container .button-effect h2 {
            font-family: "Droid Serif", serif;
            font-size: 20px;
            color: #fff;
            margin-bottom: 40px;
        }
 
        body .container .button-effect a {
            margin-right: 17px;
        }
 
        body .container .button-effect a:nth-child(2) {
            background-color: #520a8d;
        }
 
        body .container .button-effect a:nth-child(3) {
            background-color: #4d0325;
        }
 
        body .container .button-effect a:nth-child(4) {
            background-color: #09858a;
        }
 
        body .container .button-effect a:nth-child(5) {
            background-color: #e60d2a;
        }
 
        body .container .button-effect a:nth-child(6) {
            background-color: #c45f0d;
        }
 
        body .container .button-effect a:last-child {
            margin-right: 0px;
        }
 
        .effect {
            text-align: center;
            display: inline-block;
            position: relative;
            text-decoration: none;
            color: #fff;
            text-transform: capitalize;
            /* background-color: - add your own background-color */
            font-family: "Roboto", sans-serif;
            /* put your font-family */
            font-size: 18px;
            padding: 20px 0px;
            width: 150px;
            border-radius: 6px;
            overflow: hidden;
        }
 
        /* effect-4 styles */
        .effect.effect-4 {
            transition: all 0.2s linear 0s;
        }
 
        .effect.effect-4:before {
            content: "\f0d1";
            font-family: FontAwesome;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0px;
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 30px;
            transform: scale(0, 1);
            transition: all 0.2s linear 0s;
        }
 
        .effect.effect-4:hover {
            text-indent: -9999px;
        }
 
        .effect.effect-4:hover:before {
            transform: scale(1, 1);
            text-indent: 0;
        }
 
        .effect.effect-3 {
            transition: all 0.2s linear 0s;
        }
 
        .effect.effect-3:before {
            content: "\f019";
            font-family: FontAwesome;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0px;
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 30px;
            transform: scale(0, 1);
            transition: all 0.2s linear 0s;
        }
 
        .effect.effect-3:hover {
            text-indent: -9999px;
        }
 
        .effect.effect-3:hover:before {
            transform: scale(1, 1);
            text-indent: 0;
        }
 
        .effect.effect-2 {
            transition: all 0.2s linear 0s;
        }
 
        .effect.effect-2:before {
            content: "\f093";
            font-family: FontAwesome;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0px;
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 30px;
            transform: scale(0, 1);
            transition: all 0.2s linear 0s;
        }
 
        .effect.effect-2:hover {
            text-indent: -9999px;
        }
 
        .effect.effect-2:hover:before {
            transform: scale(1, 1);
            text-indent: 0;
        }
 
        .effect.effect-1 {
            transition: all 0.2s linear 0s;
        }
 
        .effect.effect-1:before {
            content: "\f2ed";
            font-family: FontAwesome;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0px;
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 30px;
            transform: scale(0, 1);
            transition: all 0.2s linear 0s;
        }
 
        .effect.effect-1:hover {
            text-indent: -9999px;
        }
 
        .effect.effect-1:hover:before {
            transform: scale(1, 1);
            text-indent: 0;
        }
 
        .effect.effect-5 {
            transition: all 0.2s linear 0s;
        }
 
        .effect.effect-5:before {
            content: "\f1d8";
            font-family: FontAwesome;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0px;
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 30px;
            transform: scale(0, 1);
            transition: all 0.2s linear 0s;
        }
 
        .effect.effect-5:hover {
            text-indent: -9999px;
        }
 
        .effect.effect-5:hover:before {
            transform: scale(1, 1);
            text-indent: 0;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <div class="button-effect">
            <h2>Animated Buttons on Hover</h2>
            <a class="effect effect-4" href="#"
               title="Confirm Delivery">
                Confirm Delivery
            </a>
            <a class="effect effect-3" href="#"
               title="Download">Download</a>
            <a class="effect effect-2" href="#"
               title="Upload">Upload</a>
            <a class="effect effect-1" href="#"
               title="Delete">Delete</a>
            <a class="effect effect-5" href="#"
               title="Click Here to Message">
                Message
            </a>
        </div>
    </div>
    <script src=
      </script>
</body>
</html>


 Output: 



Last Updated : 11 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads