Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a smooth hover effect for buttons using CSS transitions?
Asked on Feb 08, 2026
Answer
To create a smooth hover effect for buttons using CSS transitions, you can apply the `transition` property to the button's default state. This property allows you to define the duration and timing of the change in styles when the button is hovered over.
<!-- BEGIN COPY / PASTE -->
<style>
.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.button:hover {
background-color: #45a049;
transform: scale(1.05);
}
</style>
<button class="button">Hover Me</button>
<!-- END COPY / PASTE -->Additional Comment:
- The `transition` property is applied to the `.button` class to smoothly animate changes.
- In this example, both `background-color` and `transform` are transitioned over 0.3 seconds.
- The `ease` timing function provides a smooth start and end to the transition.
- You can adjust the duration and properties to fit your design needs.
Recommended Links:
