How to Create Text Reveal Effect for Buttons using HTML and CSS ?

Buttons are the most important user interface component for any website. It is very important to design the buttons in a creatively unique way. The text-reveal effect for a button is used when it is used to reveal some offer or exciting content for enhancing the user experience.

Approach: The approach is to cover the button with a strip of the same dimension as of button and then moving it to anyone direction on mouse-hover.

HTML Code: The following code snippet implements the creation of a button.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>Text Reveal Effect for Buttons</title>
  </head>
  <body>
    <button>GeeksforGeeks</button>
  </body>
</html>

chevron_right


CSS Code:

  • Step 1: Apply some basic styling to button like adding padding and border-radius to have rounded corners.
  • Step 2: Now use the before selector to create a strip of same dimension to cover the whole button.
  • Step 3: Now use hover selector to move the strip to any one direction as it is moved to the left in the example.

Note: You can move strip to any direction according to your need. Also you can use some other properties to tweak the effect according to you.



filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    button {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 20px;
        padding: 15px;
    }
  
    button::before {
        content: "";
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background: green;
        transition: 0.5s ease-in-out;
    }
  
    button:hover::before {
        left: -100%;
    }
</style>

chevron_right


Complete Code: It is the combination of the above two sections of code.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
  
    <title>
        Text Reveal Effect for Buttons
    </title>
  
    <style>
        button {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 20px;
            padding: 15px;
        }
  
        button::before {
            content: "";
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background: green;
            transition: 0.5s ease-in-out;
        }
  
        button:hover::before {
            left: -100%;
        }
    </style>
</head>
  
<body>
    <button>GeeksforGeeks</button>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.