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

11 Feb, 2021
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 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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Questions
HTML-Questions
Technical Scripter 2020
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML