Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create Text Reveal Effect for Buttons using HTML and CSS?
In this article, we will discuss the approach to creating 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.
The approach is to cover the button with a strip of the same dimension as of button and then moving it in any one direction on mouse hover.
Syntax
selector::before {
content: "";
/* positioning and styling properties */
}
selector:hover::before {
/* transform properties for reveal effect */
}
Key CSS Properties
To create this effect, we need to understand two important CSS selectors
::before Pseudo-element Creates a pseudo-element that represents the first child of the selected element. It is used to add decorative content before an element's content using the content property.
:hover Pseudo-class Applies styles when the mouse hovers over an element. It can be used on any element to create interactive effects.
Example: Text Reveal Button Effect
The following example creates a button with a sliding text reveal effect
<!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>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.reveal-btn {
position: relative;
font-size: 18px;
padding: 15px 30px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
overflow: hidden;
z-index: 1;
}
.reveal-btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #2196F3;
transition: transform 0.5s ease-in-out;
z-index: -1;
}
.reveal-btn:hover::before {
transform: translateX(-100%);
}
</style>
</head>
<body>
<button class="reveal-btn">Hover to Reveal Text</button>
</body>
</html>
A green button appears in the center of the page. When you hover over it, a blue overlay slides from right to left, creating a text reveal effect.
How It Works
The text reveal effect works through these key steps
- Step 1 The button is styled with basic properties like padding, background color, and border-radius
-
Step 2 The
::beforepseudo-element creates an overlay with the same dimensions as the button -
Step 3 On hover, the overlay slides away using
transform: translateX(-100%), revealing the underlying button text -
Step 4 The
transitionproperty ensures smooth animation movement
Browser Support
| Browser | Version |
|---|---|
| Google Chrome | 1.0+ |
| Firefox | 1.5+ |
| Safari | 4.0+ |
| Edge | 12.0+ |
| Opera | 9.0+ |
Conclusion
The text reveal effect for buttons is an elegant way to enhance user interaction. By combining the ::before pseudo-element with :hover and CSS transitions, you can create engaging button animations that improve the overall user experience on your website.
2K+ Views
