How to change the color of a button when the mouse is on it using CSS
How to change the color of a button when the mouse is over it with CSS
In web design, buttons are a crucial element in user interaction. Changing the color of a button when the user hovers over it can enhance the user experience and make it easier for users to understand its function. In this article, we’ll explain how to use CSS to change the color of a button when the mouse is over it.
1. Using the :hover Pseudo-Class
The :hover pseudo-class selects the state of an element when the mouse is over it. By adding the :hover pseudo-class to a button, we can change its style when the user hovers over it.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover Effect</title>
<style>
.button {
padding: 10px 20px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<button class="button">Hover Me</button>
</body>
</html>
Code Running Results:
In the example above, we created a button style and added the :hover pseudo-class to it. When the user hovers over the button, the button’s background color changes from blue to dark blue.
2. Using the transition Property for Smooth Transitions
In the example above, we used the transition property to create a smooth transition between button colors. The transition property allows you to define an element’s transition effect, making style changes smoother.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover Effect with Transition</title>
<style>
.button {
padding: 10px 20px;
background-color: #27ae60;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: #2ecc71;
}
</style>
</head>
<body>
<button class="button">Hover Me</button>
</body>
</html>
Code running results:
In the example above, we added the transition: background-color 0.3s; property to the button, defining a 0.3-second transition for the background color. When the user hovers over the button, the background color smoothly changes from green to dark green.
3. Using RGBA Colors to Achieve Translucency
In addition to changing the background color of a button, we can also achieve a translucent effect by using RGBA colors. RGBA colors define the transparency of the color, giving the button a different visual effect when the mouse hovers over it.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover Effect with RGBA Color</title>
<style>
.button {
padding: 10px 20px;
background-color: rgba(231, 76, 60, 1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: rgba(231, 76, 60, 0.8);
}
</style>
</head>
<body>
<button class="button">Hover Me</button>
</body>
</html>
Code running results:
In the example above, we use rgba(231, 76, 60, 1) to define the button’s background color as red with an opacity of 1. When the user hovers over the button, the background color changes to red with an opacity of 0.8, creating a semi-transparent effect.
4. Use the box-shadow property to add a shadow effect
In addition to changing the button’s background color, we can also use the box-shadow property to add a shadow effect to the button, making it appear more three-dimensional when the mouse hovers over it.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover Effect with Box Shadow</title>
<style>
.button {
padding: 10px 20px;
background-color: #f39c12;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: box-shadow 0.3s;
}
.button:hover {
box-shadow: 0 0 10px rgba(243, 156, 18, 0.7);
}
</style>
</head>
<body>
<button class="button">Hover Me</button>
</body>
</html>
Code Running Result:
In the example above, we added the box-shadow: 0 0 10px rgba(243, 156, 18, 0.7); property to the button to define the button’s shadow effect. When the user hovers the mouse over the button, it takes on a three-dimensional effect with a shadow.
5. Use the transform property to add a zoom effect
In addition to changing the button’s color and shadow, we can also use the transform property to add a zoom effect to the button, creating a more vivid animation effect when the mouse hovers over it.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover Effect with Transform</title>
<style>
.button {
padding: 10px 20px;
background-color: #9b59b6;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: transform 0.3s;
}
.button:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<button class="button">Hover Me</button>
</body>
</html>
Code Running Results:
In the above example, we added the transform: scale(1.1); property to the button, defining the button’s scale effect as 1.1x. When the user hovers over the button, the button will display an enlarged animation effect.
6. Use the :before pseudo-element to add a hover effect
In addition to changing the style of the button itself, we can also use the :before pseudo-element to add a hover effect to the button, making it appear even more impressive when the mouse hovers over it.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover Effect with Before Pseudo-element</title>
<style>
.button {
position: relative;
padding: 10px 20px;
background-color: #1abc9c;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
overflow: hidden;
}
.button:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s;
}
.button:hover:before {
width: 200%;
height: 200%;
}
</style>
</head>
<body>
<button class="button">Hover Me</button>
</body>
</html>
Code Running Result:
In the above example, we added the :before pseudo-element to the button and set a transition effect for the width and height to create a magnifying effect when the button is hovered.
7. Use the text-shadow Property to Add a Text Shadow Effect
In addition to changing the background color and style of a button, we can also use the text-shadow property to add a shadow effect to the button text, making it appear more three-dimensional when the mouse hovers over it.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover Effect with Text Shadow</title>
<style>
.button {
padding: 10px 20px;
background-color: #34495e;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: text-shadow 0.3s;
}
.button:hover {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<button class="button">Hover Me</button>
</body>
</html>
Result of running the code:
In the above example, we added the text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); property to the button, defining a shadow effect for the button text. When the user hovers over the button, the button text will appear with a three-dimensional shadow.
8. Use the background-image property to add a background image effect
In addition to changing the color and style of a button, you can also use the background-image property to add a background image effect to the button, making it more vivid when the mouse hovers over it.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover Effect with Background Image</title>
<style>
.button {
padding: 10px 20px;
background-color: #e74c3c;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
background-image: url('https://www.geek-docs.com/wp-content/uploads/2021/10/https://coder-cafe.com/wp-content/uploads/2025/09/geek-docs-https://coder-cafe.com/wp-content/uploads/2025/09/logo.png'); background-size: cover;
background-position: center;
transition: background-color 0.3s;
}
.button:hover {
background-color: #c0392b;
}
</style>
</head>
<body>
<button class="button">Hover Me</button>
</body>
</html>
Code Running Results:
In the example above, we added a background-image to the button: The url('https://www.geek-docs.com/wp-content/uploads/2021/10/https://coder-cafe.com/wp-content/uploads/2025/09/geek-docs-https://coder-cafe.com/wp-content/uploads/2025/09/logo.png'); property defines the button’s background image as the Geek Docs logo. When the user hovers over the button, the button’s background color changes from red to dark red.
9. Adding Clipping Effects with the clip-path Property
In addition to changing the button’s style and background, we can also use the clip-path property to add a clipping effect to the button, giving it a more unique shape when the mouse hovers over it.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover Effect with Clip Path</title>
<style>
.button {
padding: 10px 20px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
transition: background-color 0.3s;
}
.button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<button class="button">Hover Me</button>
</body>
</html>
Result of running the code:
In the example above, we added clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%); property defines the button’s cropping effect as an irregular quadrilateral. When the user hovers over the button, the button’s background color changes from blue to dark blue.
10. Adding Blend Mode Effects with the mix-blend-mode Property
In addition to changing the button’s style and shape, we can also use the mix-blend-mode property to add blend mode effects to buttons, creating even cooler visual effects when the mouse hovers over them.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover Effect with Mix Blend Mode</title>
<style>
.button {
padding: 10px 20px;
background-color: #f1c40f;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
mix-blend-mode: screen;
transition: background-color 0.3s;
}
.button:hover {
background-color: #f39c12;
}
</style>
</head>
<body>
<button class="button">Hover Me</button>
</body>
</html>
Result of running the code:
In the example above, we added the mix-blend-mode: screen; property to the button, defining its blend mode as screen. When the user hovers over the button, the background color of the button changes from yellow to orange.
Through the example code above, we’ve detailed how to use CSS to change the color of a button when the mouse hovers over it. By changing the button’s style, background color, shadow effects, animation, and more, you can make the button appear more vivid and engaging when the user interacts with it, enhancing the user experience and the visual appeal of the page.
In addition to the methods described in the examples above, you can also use CSS animations, transitions, gradients, and other techniques to create even more diverse button hover effects. Through continuous experimentation and practice, you can discover more interesting button hover effects and add more interactive and creative elements to your page.