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

30 Jun, 2020
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.
<!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>
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.
<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>
Complete Code: It is the combination of the above two sections of 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>
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-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
How to update Node.js and NPM to next version ?
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)