How to Fade a Button on Hover using CSS ?
Fading a button on Hover in CSS is a visually engaging effect that can be done using various approaches.
Below are the approaches to fade a button on hover using CSS:
Table of Content
- Using opacity Property
- Using Linear Gradient with RGBA Value
Using opacity Property
This approach utilizes the CSS opacity property to achieve a button fade effect upon hover. Initially, the button’s opacity is set to 1, rendering it fully opaque. When hovered over, the opacity smoothly transitions to 0.3, resulting in a gradual fade-out effect.
Syntax:
opacity: value;
Example: The below example uses opacity to fade a button on hover using CSS.
<!DOCTYPE html>
<html>
<head>
<title>Fade a button on Hover</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
.fade-btn1 {
padding: 10px 20px;
background-color: green;
color: #fff;
border: none;
cursor: pointer;
transition: opacity 0.3s ease-in-out,
color 0.3s ease-in-out;
}
.fade-btn1:hover {
opacity: 0.3;
color: red;
}
</style>
</head>
<body>
<h1 style="color: green;">
w3wiki
</h1>
<h3>Using opacity</h3>
<button class="fade-btn1">
Hover me
</button>
</body>
</html>
Output:
Using Linear Gradient with RGBA Value
In this approach, we are using a linear gradient with RGBA Value as the background for the button to achieve a fading effect on hover. The linear-gradient function defines a smooth transition between two colors, creating an appealing gradient. The transition is controlled by the background property with a specified duration and easing function.
Syntax:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
Example: The below example uses Linear Gradient to fade a button on hover using CSS.
<!DOCTYPE html>
<html>
<head>
<title>Fade a button on hover</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
h1 {
color: green;
}
.fade-btn3 {
padding: 10px 20px;
background: linear-gradient(rgb(213, 52, 219),
rgba(52, 152, 219, 0.5));
color: #fff;
border: none;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
.fade-btn3:hover {
background: linear-gradient(rgba(52, 152, 219, 0.7),
rgba(246, 191, 37, 0.3));
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h3>Using Linear Gradient</h3>
<button class="fade-btn3">Hover me</button>
</body>
</html>
Output:
Contact Us