How to Create Text Reveal Effect for Buttons using HTML and CSS ? Last Updated : 30 Jun, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. html <!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. CSS <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. html <!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: Comment More infoAdvertise with us Next Article How to create gradient search button using HTML and CSS ? S sirohimukul1999 Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to create text-reveal effect using HTML and CSS ? Text-reveal is a type of effect in which all the alphabets of the text are revealed one by one in some animated way. There are uncountable ways to animate text for this effect. It is up to your creativity how you want the text to reveal. We will look at a basic and easy way to get started. Table of 3 min read How to Create Engraved Text Effect using HTML and CSS ? The engraved text effect is an effect that you can use in your websites as a heading or a sub-heading to make it look more pleasing and attractive. Approach: The engraved text effect can be easily generated using HTML and CSS. First we will create a basic text using HTML and then by using the CSS te 2 min read How to Create Sliding Text Reveal Animation using HTML & CSS ? In this article, we will implement sliding text reveal animation which can be used in personal portfolios, websites, and even in YouTube introduction videos to add an extra edge to our videos so that it looks more interesting and eye-catchy at first instance and the best part is that we will do that 3 min read How to Create Neon Light Button using HTML and CSS? The neon light button animation effect can be easily created by using HTML and CSS. By using HTML, we will design the basic structure of the button and then by using the CSS, we can create the neon light animation effect. HTML code: In this section, we will design a simple button structure using anc 2 min read How to create gradient search button using HTML and CSS ? In this article, we will see how to create a gradient search button using HTML & CSS, along with knowing its basic implementation through the examples. The creation of a gradient search button involves the CSS linear-gradient() function, which sets the background color of the button. Here, we ha 4 min read How to Create an Effect to Change Button Color using HTML and CSS ? The color-changing effect of a button is very common but what we are going to do a slightly advanced version of this effect. The background will change like a clip effect rotating at some particular angle. Approach: The approach is to provide two or three background and then rotating them on differe 3 min read Like