Open In App

Create a Button Animation Effect using CSS

Improve
Improve
Like Article
Like
Save
Share
Report

It is possible to apply various animation effects to any item using the CSS animation property. In order to get the hover effect, we will design a button and use the animation effect. When the user hovers over the button, the underlining for the text expands till it reaches the end. The hover animation on the button will be quite appealing. The new feature which is the text-underline-offset property is also used for animating the underline.

CSS pseudo selectors before and after provides a way to style the different parts of an element. The:: before pseudo allows us to insert the content before the element’s content.

Syntax: The following is the syntax to use ::before pseudo selector to style the element:

element::before{
       content: '';
       // CSS properties
}

The ::after pseudo selector allows us to insert the content after the element’s content. 

Syntax: The following is the syntax for inserting the content after the content of the element:

element::after{
       content:'';
       // CSS properties
}

Here the element can be selected through class name, id, or element name.

We will use both selectors to style the button element. Initially, we have a button element and we will create a hover effect by inserting blank content before and after the button element. By inserting a blank before the button element, we can apply CSS properties to give a shape to this dynamic element in such a way that it looks like a straight line.

It will look like an underline below the button element. Initially, we are setting the width of this dynamic element to zero and capturing the hover event, and when receiving the hover event increasing the width of this dynamic element.

Example 1: Let’s create a button element and create an animated underline below the text using ::after the pseudo selector. 

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>GeeksforGeeks</title>
  
    <style>
        button {
            padding: 1rem 3rem;
            background-color: rgba(0, 128, 0, 0.625);
            border: 0px;
            color: white;
            font-size: 20px;
            position: relative;
            border-radius: 0.2rem;
            cursor: pointer;
        }
  
  
        button::after {
            content: '';
            position: absolute;
            width: 0rem;
            height: 0.2rem;
            background-color: green;
            right: 0;
            bottom: 0;
            border-radius: 0.2rem;
        }
  
        button:hover::after {
            width: 11.2rem;
            transition: all 1s ease-in-out;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    
    <button>Hover Me</button>
</body>
  
</html>


Output:

CSS animated text underline

CSS animated text underline

As you can see when the user hovers the width of the ::before dynamic element width increases from right to left and creates a perfect transition effect.

Example 2: Let’s use both::before and::after pseudo selectors and create an animated underline above and below the text.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>GeeksforGeeks</title>
  
    <style>
        button {
            padding: 1rem 3rem;
            background-color: rgba(0, 128, 0, 0.625);
            border: 0px;
            color: white;
            font-size: 20px;
            position: relative;
            border-radius: 0.2rem;
            cursor: pointer;
        }
  
        button::before {
            content: '';
            position: absolute;
            width: 0rem;
            height: 0.2rem;
            background-color: green;
            left: 0;
            top: 0;
            border-radius: 0.2rem;
        }
  
        button:hover::before {
            width: 11.2rem;
            transition: all 1s ease-in-out;
        }
  
  
        button::after {
            content: '';
            position: absolute;
            width: 0rem;
            height: 0.2rem;
            background-color: green;
            right: 0;
            bottom: 0;
            border-radius: 0.2rem;
        }
  
        button:hover::after {
            width: 11.2rem;
            transition: all 1s ease-in-out;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green;">
          GeeksforGeeks
      </h1>
      
      <button>Hover Me</button>
</body>
  
</html>


Output:

CSS animated text underline

CSS animated text underline

As you can see now both ::after and ::before elements are used to create the underline below and above the text of the button and when any hover event occurs the width of both elements increases and it creates a transition effect in which both the element’s width is increasing opposite sides of each other.



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