Open In App

How to apply Amazing Hover Effect over Button using HTML and CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

You have visited many websites and you have seen many hover buttons present in those websites. So, such  Hover Button animation effect can be easily generated by using HTML and CSS. By using HTML we will design the basic structure of the button and then by using the properties of CSS, we can create the hover animation effect.

A sample video is provided to understand today’s task with more clarity.

Step by step implementation

Step 1: First, we will design a simple button structure using a button tag of HTML. Comments are already in code for your help.

HTML




<!DOCTYPE HTML>
  
<html>
  
<head>
    <meta http-equiv="Content-Type" 
        content="text/html; charset=UTF-8" />
  
    <!-- Give a suitable title -->
    <title>GFG| Button Styling</title>
</head>
    
<body>
  
    <!-- Create heading using h1 tag -->
    <h1> GeeksForGeeks Button Styling</h1>
  
    <div class = "container">
        
        <!--creation of button-->
        <button class="btn btn1">Click Me</button>
        <button class="btn btn2">Click Me</button>
    </div>
</body>
  
</html>


Step 2: Next, we will use some CSS properties to design the button and use the hover class to get the animation effect when we hover the mouse over the button.




/* Styling background */
body {
    margin: 0;
    padding: 0;
}
  
  
/* Styling heading */
h1 {
    font-size: 35px;
    color: green;
    text-align: center;
}
  
/* Styling container class */
.container {
    text-align: center;
    margin-top: 150px;
}
  
/* Styling btn class */
.btn {
    background: none;
    border: 1px solid green;
    font-size: 23px;
    padding: 10px 20px;
    font-family: "montserrat";
    cursor: pointer;
    margin: 10px;
    transition: 0.8s;
    position: relative;
    overflow: hidden;
}
  
/* Styling btn1, btn2 class */
.btn1,
.btn2 {
    color: green;
}
  
/* Creating animation effect */
.btn1:hover,
.btn2:hover {
    color: #fff;
}
  
.btn::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0%;
    background: green;
    z-index: -1;
    transition: 0.8s;
}
  
.btn1::before {
    top: 0;
    border-radius: 0 0 50% 50%;
}
  
.btn2::before {
    bottom: 0;
    border-radius: 50% 50% 0 0;
}
  
.btn1:hover::before,
.btn2:hover::before {
    height: 180%;
}
  
/* Completion of animation effect */


Complete Code: In this section, we will combine the above two sections to create a hover button using HTML and CSS.

HTML




<!DOCTYPE HTML>
  
<html>
  
<head>
    <meta http-equiv="Content-Type" 
        content="text/html; charset=UTF-8" />
  
    <style>
  
        /* Styling background */
        body {
            margin: 0;
            padding: 0;
        }
  
        /* Styling heading */
        h1 {
            font-size: 35px;
            color: green;
            text-align: center;
        }
  
        /* Styling container class */
        .container {
            text-align: center;
            margin-top: 150px;
        }
  
        /* Styling btn class */
        .btn {
            background: none;
            border: 1px solid green;
            font-size: 23px;
            padding: 10px 20px;
            font-family: "montserrat";
            cursor: pointer;
            margin: 10px;
            transition: 0.8s;
            position: relative;
            overflow: hidden;
        }
  
        /* Styling btn1, btn2 class */
        .btn1,
        .btn2 {
            color: green;
        }
  
        /* Creating animation effect */
        .btn1:hover,
        .btn2:hover {
            color: #fff;
        }
          
        .btn::before {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            height: 0%;
            background: green;
            z-index: -1;
            transition: 0.8s;
        }
          
        .btn1::before {
            top: 0;
            border-radius: 0 0 50% 50%;
        }
          
        .btn2::before {
            bottom: 0;
            border-radius: 50% 50% 0 0;
        }
          
        .btn1:hover::before,
        .btn2:hover::before {
            height: 180%;
        }
  
        /* completion of animation effect code */
    </style>
</head>
  
<body>
  
    <!-- Create heading using h1 tag -->
    <h1> GeeksForGeeks Button Styling</h1>
  
    <div class="container">
  
        <!-- Creation of button -->
        <button class="btn btn1">Click Me</button>
        <button class="btn btn2">Click Me</button>
    </div>
</body>
  
</html>  


Output:



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