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 >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.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 >GeeksforGeeks</ button >
</ body >
</ html >
|
Output:
Last Updated :
30 Jun, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...