Here you’ll Find Code Gradient Underline Background Hover Effect. Earlier I have shared many blogs on Gradient Background Hover Effect. and now I’m going to create a Gradient Underline Background Hover Effect.
HTML CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gradient Background Hover Effect</title>
<!--Google Font-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<center><h1 style="color:white;">Hover Me</h1></center>
<a href="#">CodeHubDeep</a>
</div>
</body>
</html>
CSS CODE :
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-image: linear-gradient(to right top, #f4f416, #ffa000, #ff0051, #ff00a2, #5d12eb);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
a{
font-size: 100px;
position: relative;
text-decoration: none;
font-family: "Poppins",sans-serif;
color: #ffffff;
cursor: pointer;
}
a:before{
content: "";
position: absolute;
height: 0.1em;
width: 100%;
background: linear-gradient(
to right,
#fd004c,
#fe9000,
#fff020,
#3edf4b,
#3363ff,
#b102b7
);
background-size: 200% 100%;
bottom: -0.1em;
transition: 1.5s;
}
a:hover:before{
background-position: 100% 0;
}
0 Comments