Ask any question about CSS here... and get an instant response.

How can I create a smooth gradient transition for a button hover effect?

Asked on Oct 17, 2025

Answer

To create a smooth gradient transition for a button hover effect, you can use CSS transitions combined with background gradients. This involves defining a gradient for the button's default state and another for the hover state, then applying a transition to smoothly animate between them.

<!-- BEGIN COPY / PASTE -->
    <style>
      .gradient-button {
        background: linear-gradient(to right, #ff7e5f, #feb47b);
        border: none;
        color: white;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.5s ease;
      }

      .gradient-button:hover {
        background: linear-gradient(to right, #feb47b, #ff7e5f);
      }
    </style>

    <button class="gradient-button">Hover Me</button>
    <!-- END COPY / PASTE -->

Additional Comment:

The "transition" property is used to animate the background change smoothly over 0.5 seconds.
Linear gradients are defined using "linear-gradient", specifying the direction and colors.
Ensure the button has a clear contrast between text and background for accessibility.
Adjust the transition duration and easing function to fit the desired effect.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I create a smooth gradient transition for a button hover effect?

Asked on Oct 17, 2025

Answer

The Q&A Network