CSS mouse hover background color change
CSS Mouseover Background Color Change
Mouseover effects are a very common interactive effect in web design. By changing the background color of an element, users can more intuitively perceive the element’s interactivity and improve the user experience. This article will detail how to use CSS to achieve a background color change effect on mouse hover.
1. Use the :hover pseudo-class to implement a simple background color change
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Background Color Change</title>
<style>
.btn {
padding: 10px 20px;
background-color: #3498db;
color: #fff;
text-align: center;
display: inline-block;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #e74c3c;
}
</style>
</head>
<body>
<button class="btn">Hover Me</button>
</body>
</html>
Output:
In the example above, when the mouse hovers over the button, the button’s background color changes from blue (#3498db) to red (#e74c3c).
2. Using CSS Variables to Change Background Color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Background Color Change with CSS Variables</title>
<style>
:root {
--primary-color: #3498db;
--hover-color: #e74c3c;
}
.btn {
padding: 10px 20px;
background-color: var(--primary-color);
color: #fff;
text-align: center;
display: inline-block;
transition: background-color 0.3s;
}
.btn:hover {
background-color: var(--hover-color);
}
</style>
</head>
<body>
<button class="btn">Hover Me</button>
</body>
</html>
Output:
In this example, we use CSS variables to define two color values, --primary-color and --hover-color, and then use these two variables in the button’s background color and the hover background color.
3. Use CSS animation to achieve background color gradient effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Background Color Change with CSS Animation</title>
<style>
@keyframes colorChange {
0% {
background-color: #3498db;
}
100% {
background-color: #e74c3c;
}
}
.btn {
padding: 10px 20px;
background-color: #3498db;
color: #fff;
text-align: center;
display: inline-block;
animation: colorChange 0.3s forwards;
}
.btn:hover {
animation: none;
background-color: #e74c3c;
}
</style>
</head>
<body>
<button class="btn">Hover Me</button>
</body>
</html>
Output:
In this example, we use CSS animations with @keyframes to define a color gradient and then apply this animation to a button. When the mouse hovers over the button, we cancel the animation and directly change the background color.
4. Use CSS transition to change background color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Background Color Change with CSS Transition</title>
<style>
.btn {
padding: 10px 20px;
background-color: #3498db;
color: #fff;
text-align: center;
display: inline-block;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #e74c3c;
}
</style>
</head>
<body>
<button class="btn">Hover Me</button>
</body>
</html>
Output:
In this example, we use CSS transitions to create a smooth background color change. When the mouse hovers over the button, the background color changes from blue to red over 0.3 seconds.
5. Use CSS pseudo-elements to change background color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Background Color Change with CSS Pseudo-elements</title>
<style>
.btn {
padding: 10px 20px;
background-color: #3498db;
color: #fff;
text-align: center;
display: inline-block;
position: relative;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #e74c3c;
opacity: 0;
transition: opacity 0.3s;
}
.btn:hover::before {
opacity: 1;
}
</style>
</head>
<body>
<button class="btn">Hover Me</button>
</body>
</html>
Output:
In this example, we use the CSS pseudo-element ::before to achieve a background color change effect. When the mouse hovers over the button, the background color of the pseudo-element changes from transparent to red.
6. Use CSS blending mode to change background color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Background Color Change with CSS Blend Mode</title>
<style>
.btn {
padding: 10px 20px;
background-color: #3498db;
color: #fff;
text-align: center;
display: inline-block;
mix-blend-mode: multiply;
}
.btn:hover {
background-color: #e74c3c;
}
</style>
</head>
<body>
<button class="btn">Hover Me</button>
</body>
</html>
Output:
In this example, we use the CSS blend mode mix-blend-mode to create a background color change effect. When the mouse hovers over the button, the background color of the button changes from blue to red.
7. Use CSS filters to change background color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Background Color Change with CSS Filter</title>
<style>
.btn {
padding: 10px 20px;
background-color: #3498db;
color: #fff;
text-align: center;
display: inline-block;
filter: grayscale(100%);
transition: filter 0.3s;
}
.btn:hover {
filter: none;
}
</style>
</head>
<body>
<button class="btn">Hover Me</button>
</body>
</html>
Output:
In this example, we use the CSS filter filter to achieve a background color change. When the mouse hovers over the button, the grayscale filter is removed and the button returns to its original color.
8. Use CSS gradient background to change background color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Background Color Change with CSS Gradient</title>
<style>
.btn {
padding: 10px 20px;
background: linear-gradient(to right, #3498db, #e74c3c);
color: #fff;
text-align: center;
display: inline-block;
transition: background 0.3s;
}
.btn:hover {
background: linear-gradient(to right, #e74c3c, #3498db); }
</style>
</head>
<body>
<button class="btn">Hover Me</button>
</body>
</html>
Output:
In this example, we use a CSS gradient background linear-gradient to achieve a background color change effect. When the mouse hovers over the button, the background color of the button gradually changes from blue to red.
9. Using CSS to Dynamically Generate Content to Change Background Color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Background Color Change with CSS Generated Content</title>
<style>
.btn {
padding: 10px 20px;
background-color: #3498db;
color: #fff;
text-align: center;
display: inline-block;
position: relative;
}
.btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #e74c3c;
opacity: 0;
transition: opacity 0.3s;
}
.btn:hover::after {
opacity: 1;
}
</style>
</head>
<body>
<button class="btn">Hover Me</button>
</body>
</html>
Output:
In this example, we use CSS dynamically generated content ::after to achieve the background color change effect. When the mouse hovers over the button, the background color of the generated content changes from transparent to red.
10. Use CSS grid layout to change background color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Background Color Change with CSS Grid Layout</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.btn {
padding: 10px 20px;
background-color: #3498db;
color: #fff;
text-align: center;
display: inline-block;
transition: background-color 0.3s;
} .btn:hover {
background-color: #e74c3c;
}
</style>
</head>
<body>
<div class="container">
<button class="btn">Button 1</button>
<button class="btn">Button 2</button>
<button class="btn">Button 3</button>
</div>
</body>
</html>
Output:
In this example, we use CSS Grid Layout grid to arrange multiple buttons and change their background color upon mouse hover.
The above is some sample code for using CSS to change the background color upon mouse hover. This sample code will help you better understand and apply this interactive effect.