Enhance Your Website's Interactivity with animated Text Changes Using HTML, CSS, and JavaScript. When user hover on button the text change with sliding animation.
You’ll learn in this blog post:
- How to change text of button on hover, click etc.
- Button hover effects.
- How to slide text on hover.
How we going to make it?
So, we going change the button text on hover, actually we slide the text on mouseover and on mouseout using JavaScript.
I have also shown you how you can simply change text on hover and on click using JavaScript, by just changing its innerHTML.
Video Tutorial on Change Text on Hover:
We going to make this change text functionality in just three steps.
Step 1: Add html for creating button.
First, we going to create button with slider (with two texts inside) inside it, that slides to show another text. Means we going to change text by sliding the slider on hover.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text On Hover | maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<button type="button" class="button">
<div class="slider">
<span class="span1">Next</span>
<span class="span2">Previous</span>
</div>
</button>
</body>
</html>
Step 2: Add CSS for styling button.
Now we going to add styles to button.
CSS
*{
padding: 0px;
margin:0px;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
button{
background-color: red;
border: none;
border-radius: 5px;
cursor: pointer;
}
.slider{
display: flex;
flex-direction: column;
width: max-content;
pointer-events: none;
}
span{
font-size: 40px;
padding: 15px 50px;
color: #fff;
}
Output:
So, the design is ready, Now lets add functionality to slide the slider up and down (so that text slides).
To slide the slider, we need to add position absolute to it. And when we do it the button width and height will remain 0.
So, through JavaScript first we going to set button width equal to slider and height equals to one of the slider texts.
CSS
button{
background-color: red;
border: none;
border-radius: 5px;
cursor: pointer;
position: relative;
}
.slider{
position: absolute;
top: 0px;
display: flex;
flex-direction: column;
width: max-content;
pointer-events: none;
transition: 0.5s cubic-bezier(0.50 , -0.600 , 0.200 , 1.6);
}
JavaScript
let button = document.querySelector(".button");
let slider = document.querySelector(".slider");
let span1 = document.querySelector(".span1");
let span2 = document.querySelector(".span2");
button.style.width = span1.clientWidth + "px";
button.style.height = span1.clientHeight + "px";
Output:
Step 3: Change or slide the text on hover.
Now we going to slide the slider up and down on hover using JavaScript.
JavaScript
button.onmouseover = function(){
slider.style.top = "-" + span1.clientHeight + "px";
}
button.onmouseout = function(){
slider.style.top = "0px";
}
Output:
So that's how you can change the button text on hover. You can see demo and whole tutorial in above YouTube video.
You may like:
Final code:
You can also change text simply by just changing its innerHTML on JavaScript events like onclick, on mouseover on mouseout etc.
Change text of button on hover, click etc.
If you want to change text on hover simply you can change its innerHTML on mouseover and on mouseout.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text On Hover | maketechstuff.com</title>
</head>
<body>
<button type="button" class="button">
Next
</button>
</body>
</html>
CSS
*{
padding: 0px;
margin:0px;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
button{
font-size: 25px;
background-color: red;
border: none;
border-radius: 5px;
cursor: pointer;
overflow: hidden;
padding: 15px 30px;
color: #fff;
}
JavaScript
let button = document.querySelector(".button");
button.onmouseover = function(){
button.innerHTML = "Previous";
}
button.onmouseout = function(){
button.innerHTML = "Next";
}
Output:
Change button text on click.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text On Hover | maketechstuff.com</title>
</head>
<body>
<button type="button" class="button">
Next
</button>
</body>
</html>
CSS
*{
padding: 0px;
margin:0px;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
button{
font-size: 25px;
background-color: red;
border: none;
border-radius: 5px;
cursor: pointer;
overflow: hidden;
padding: 15px 30px;
color: #fff;
}
JavaScript
let button = document.querySelector(".button");
button.onclick = function(){
button.innerHTML = "Previous";
}
Output:
So thats how you can change text on click, hover etc, There is many other javascript events that you can use and change text from button tag, div tag, p tag, span tag etc.
Share your thoughts.