The :hover pseudo-class in CSS is used to target an element when the user hovers over it with the mouse cursor. Its purpose is to apply styles or trigger specific behaviors to enhance the user experience or provide additional visual feedback.
:hover is a tool to make interactive elements more dynamic and engaging without requiring any user input beyond moving the mouse.
Applies to
HTML elements, such as buttons, links, images, etc.
DOM Syntax
:hover {
/* ... */
}
CSS :hover – With Background-color Property
Here is an example of changing the background color of a link:
<html><head><style>
div {
padding: 1rem;
}
a {
background-color: rgb(238, 135, 9);
font-size: 1rem;
padding: 5px;
}
a:hover {
background-color: rgb(235, 235, 169);
}
</style></head><body><div><h3>Hover example - link</h3><a href="#">Hover over to see the color change!!!</a></div></body></html>CSS :hover – With Button Effect
Here is an example of changing the background color of a button:
<html><head><style>
div {
padding: 1rem;
}
button {
background-color: greenyellow;
font-size: large;
}
button:hover {
background-color: gold;
}
</style></head><body><h3>Hover example - button</h3><button>Hover me!!!</button></div></body></html>CSS :hover – With Border Effect
Here is an example, where border of the link is changing on hover:
<html><head><style>
.link {
color: blue;
text-transform: uppercase;
padding: 20px;
border: 4px solid blue;
border-radius: 10px;
display: inline-block;
}
.link:hover {
color: #494949;
border-radius: 45px;
border-color: #494949;
}
</style></head><body><h3>Hover effect on border of the link</h3><div class="button"><a class="link" href="#">Check my borders on hover</a></div></body></html>CSS :hover – With box-shadow
Here is an example, where box-shadow is added to the 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><a href="#">Hover over me!!</a></div></body></html>CSS :hover – With Background Effect
Here is an example, where the background grows over a link on hover:
<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><a href="#">Hover over me!!</a></div></body></html>CSS :hover – Rainbow Color Effect
Here is an example, where the underline of the link gives a rainbow color effect 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><a href="#">Hover over me!!</a></div></body></html>CSS :hover – Shadow Effect
Here is an example, where the a shadow effect is given to a button on hover:
<html><head><style>
body {
width: 100%;
height: 100vh;
display: grid;
justify-content: center;
align-items: center;
}
.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 OVER & CLICK!</button></body></html>
Leave a Reply