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.
Recommended Links: