This post shows you how to create an amazing css with hover effect on text. It is from Darkcode. Just click on the button Run Pen below to see how it works:
How to create a hover effect on text
Step 1: Add Html
<div class="middle">
<span class="container">
<div class="text" data-text="Effect">Effect</div>
</span>
</div>Step 2: Add CSS
body {
margin: 0;
padding: 0;
font-family: 'montserrat', sans-serif;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container {
position: relative;
display: inline-block;
padding: 0 40px;
cursor: pointer;
}
.text {
font-size: 100px;
text-transform: uppercase;
font-weight: 900;
position: relative;
color: #34495e;
}
.text::before {
content: attr(data-text);
position: absolute;
color: #fff;
width: 0;
overflow: hidden;
transition: 0.6s;
}
.container::before {
content: '';
width: 0%;
height: 100%;
position: absolute;
background: #2980b9;
right: 0;
top: 0;
transition: 0.6s;
}
.container:hover .text::before,
.container:hover::before {
width: 100%;
}