Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a smooth hover transition effect for a button with CSS? Pending Review
Asked on May 26, 2026
Answer
To create a smooth hover transition effect for a button with CSS, you can use the `transition` property. This property allows you to define the duration and timing of the change in styles when a user hovers over the button.
<!-- BEGIN COPY / PASTE -->
<button class="smooth-button">Hover Me</button>
<style>
.smooth-button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.smooth-button:hover {
background-color: #45a049;
transform: scale(1.05);
}
</style>
<!-- END COPY / PASTE -->Additional Comment:
- The `transition` property is applied to the button, specifying which properties should animate and how long the animation should take.
- In this example, both `background-color` and `transform` are transitioned over 0.3 seconds with an `ease` timing function.
- The `hover` pseudo-class triggers the transition when the mouse pointer is over the button.
- Adjust the duration and properties to fit your design needs.
Recommended Links:
