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.


Gradient Underline Background Hover Effect Source Code


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;

}