How to Fade a Button on Hover using CSS ?

Last Updated : 21 Mar, 2024

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.

HTML

<!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;">
      GeeksforGeeks
      </h1>
    <h3>Using opacity</h3>
    <button class="fade-btn1">
      Hover me
      </button>
</body>

</html>

Output:

output1

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.

HTML

<!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>GeeksforGeeks</h1>
    <h3>Using Linear Gradient</h3>
    <button class="fade-btn3">Hover me</button>
</body>

</html>