How to use opacity Property In CSS
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:
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