CSS Transitions: How to Create Smooth Hover Effects

General Developer Forum General Dev Chat
,
1

I’m working on a web project and I want to add smooth hover effects to elements on my webpage using CSS transitions. Specifically, I’d like to change the background color and text color of a button when a user hovers over it.

Here’s what I have so far in my CSS code:

.button {
    background-color: #3498db;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}

.button:hover {
    background-color: #2980b9;
    color: #fff;
}

While this works, the transition between the original and hover states is abrupt. How can I create a smoother transition effect, so the color change appears gradual and fluid?

I’d appreciate it if you could provide guidance on how to use CSS transitions to achieve this smooth hover effect, including any necessary CSS properties and values. Thank you for your help!