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.
<!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 >w3wiki</ 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.5 s 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 >w3wiki</ button > </ body > </ html > |
Output:
Contact Us