HOVER EFFECT IN CSS

The CSS cursor hovering is a tool to make interactive elements more dynamic and engaging without requiring any user input beyond moving the mouse.

CSS Hover - Background Color Change

<html>
<head>
<title>CSS</title>
<style>
h1
{
width:50%;
height:10%;
background-color:red;
}
h1:hover
{
width:100%;
height:20%;
background-color:pink;
}
</style>
</head>
<body>
<h1>i am hover tag</h1>
</body>
</html>

output

CSS

i am hover tag


CSS Hover - link Color Change


<html>
<head>
<title>CSS</title>
<style>
a:hover
{
color:green;
background-color:pink;
}
</style>
</head>
<body>
<a href="#">i am hover tag</a>
</body>
</html>

output


CSS i am hover tag

CSS Hover - Ranbow Color Effect


<html>
<head>
<style>
a
{
color: black;
text-decoration: none;
}
a
{
background:linear-gradient(to right,
rgb(179, 232, 168),
rgb(185, 162, 215)
),
linear-gradient(
to right,
rgba(255, 0, 0, 1),
rgba(255, 0, 180, 1),
rgba(0, 200, 50, 1)
);
background-size: 100% 5px, 0 5px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 700ms;
}
a:hover
{

background-size: 0 5px, 100% 5px;
} body
{
display: grid;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 2rem;
height: 100vh;
}
</style>
</head>
<body>
<a href="#">Hover over me!!</a>
</body>
</html>