CSS Mouseover
CSS Hover
The CSS :hover pseudo-class is used to target an element when the user hovers the mouse over it. Its purpose is to apply styles or trigger specific behaviors to enhance the user experience or provide additional visual feedback.
CSS hover is a tool for making interactive elements more dynamic and engaging, without requiring any user input beyond moving the mouse.
Applies to
HTML elements such as buttons, links, https://coder-cafe.com/wp-content/uploads/2025/09/images, etc.
CSS syntax
:hover {
/* ... */
}
CSS Hover – Link Color Change
Here’s an example of changing the background color of a link when the mouse cursor hovers over it:
<html>
<head>
<style>
a {
background-color: #40a944;
color: #fff;
font-size: 1rem;
padding: 10px;
}
a:hover {
background-color: #cfe9d0;
color: #000;
}
</style>
</head>
<body>
<div>
<h2>Bring your cursor on the below link</h2>
Hover over to see the color change!!!
</div>
</body>
</html>
CSS Hover – Background Color Change
Here’s an example of changing the background color of a button when the mouse cursor hovers over it:
<html>
<head>
<style>
button {
background-color: greenyellow;
padding: 10px;
font-size: large;
}
button:hover {
background-color: gold;
}
</style>
</head>
<body>
<h2>Bring your cursor on the below button</h2>
<button>Hover me!!!</button>
</div>
</body>
</html>
CSS Hover – Changing Cursor Shape
Here’s an example of changing the cursor shape when the mouse cursor moves over a button:
<html>
<head>
<style>
button {
background-color: greenyellow;
padding: 10px;
font-size: large;
}
button:hover {
cursor:pointer;
}
</style>
</head>
<body>
<h2>Bring your cursor on the below button</h2>
<button>Hover me!!!</button>
</div>
</body>
</html>
CSS Hover – Changing Border Shape
Here is an example of a link with a changing border on hover:
<html>
<head>
<style>
.link {
color: #40a944;
text-transform: uppercase;
padding: 20px;
border: 4px solid #40a944;
border-radius: 10px;
display: inline-block;
}
.link:hover {
color: #494949;
border-radius: 45px;
border-color: #494949;
}
</style>
</head>
<body>
<h2>Hover effect on border of the link</h2>
<div class="button">Check my borders on hover</div>
</body>
</html>
CSS Hover – Adding Box Shadows
Here’s an example that adds a box shadow to a link on hover:
<html>
<head>
<style>
a {
font-size: 2rem;
color: #071402;
margin: 0.25rem;
padding: 0.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
box-shadow: inset 100px 0 0 100px #9ce2cc;
color: rgb(240, 32, 32);
}
</style>
</head>
<body>
<div>
Hover over me!!
</div>
</body>
</html>
CSS Hover – Background Enlargement
Here’s an example where the background enlarges when hovering over a link:
<html>
<head>
<style>
a {
text-decoration-line: underline;
color: #18272F;
font-size: 2rem;
position: relative;
}
a::before {
content: '';
background-color: rgba(118, 213, 83, 0.75);
font-size: 2rem;
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 10px;
z-index: -1;
transition: all .5s ease-in-out;
}
a:hover::before {
bottom: 0;
height: 100%;
}
</style>
</head>
<body>
<div>
Hover over me!!
</div>
</body>
</html>
CSS Hover – Rainbow Effect
Here is an example of a link with a rainbow underline on hover:
<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>
<div>
Hover over me!!
</div>
</body>
</html>
CSS Hover – Shadow Effect
Here is an example where a button is given a shadow effect when hovered:
<html>
<head>
<style>
body {
width: 100%;
height: 100vh;
display: grid;
}
.glow {
padding: 10px;
width: 250px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 20px;
}
.glow:before {
content: '';
background: linear-gradient(60deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -4px;
left:-4px;
background-size: 400%;
z-index: -1;
filter: blur(15px);
width: calc(100% + 6px);
height: calc(100% + 6px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow:active {
color: rgb(246, 235, 235)
}
.glow:active:after {
background: transparent;
}
.glow:hover:before {
opacity: 1;
}
.glow:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
</style>
</head>
<body>
<button class="glow" type="button">Hover & Click!</button>
</body>
</html>