Hello Guys This is Harish form WebDevHere. Today in this post you will learn about how to create an animated text Hover effect using HTML & CSS.
in this tutorial i just create an Hover effect. that you can use any of your project. this hover effect can be use in any button element, any menu items,
Here are The HTML Code.....👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- custom css -->
<link rel="stylesheet" href="style.css">
<title>Text Hover Effact</title>
</head>
<body>
<a href="#" class="hover-effact">click here</a>
</body>
</html>
Here are The CSS Code.....👇
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
background-color: #000;
}
.hover-effact{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 42px;
padding: 0 10px;
text-decoration: none;
text-transform: uppercase;
}
.hover-effact::before,
.hover-effact::after{
content: "";
background-color: peru;
width: 0;
height: 5px;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 5px;
transition: width 0.2s linear;
}
.hover-effact::before{
right: 100%;
}
.hover-effact::after{
left: 100%;
}
.hover-effact:hover::before,
.hover-effact:hover::after{
width: 35%;
}
You can watch this tutorial Here..👇
