Skip to content
Related Articles

Related Articles

Improve Article

How to create Hover animations on Button ?

  • Last Updated : 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=
            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=
            crossorigin="anonymous"></script>
  </body>
</html>

 Output: 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :