How to create Hover animations on Button ?

05 Mar, 2021
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.
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="https://kit.fontawesome.com/704ff50790.js"            crossorigin="anonymous">    </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
<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>
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="https://kit.fontawesome.com/704ff50790.js"            crossorigin="anonymous"></script>  </body></html>
 Output: 
CSS-Properties
CSS-Questions
CSS-Selectors
Technical Scripter 2020
CSS
HTML
Technical Scripter
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.