How to use Linear Gradient with RGBA Value In CSS
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:
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
Contact Us