CSS Transitions: How to Create Smooth Hover Effects

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

https://www.w3schools.com/css/css3_transitions.asp

To create a smooth and gradual transition effect for the hover state of your button, you can use CSS transitions. The key is to specify which CSS properties you want to transition and the duration of the transition. You can do this by adding the transition property to your .button selector. Here's an updated version of your CSS code:

css

Copy 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;

    /* Add transition properties */

    transition: background-color 0.3s ease, color 0.3s ease;

}

.button:hover {

    background-color: #2980b9;

    color: #fff;

}

In this code:

We added a transition property to the .button selector. This property specifies the CSS properties that you want to transition, the duration of the transition, and the easing function for the transition.

We're transitioning both background-color and color properties with a duration of 0.3s (0.3 seconds) and using the ease timing function, which provides a smooth and gradual transition effect.

Now, when you hover over the button, you should see a smooth color transition that appears gradual and fluid. You can adjust the transition duration (0.3s in this example) to make it faster or slower, depending on your preference.

https://www.joshwcomeau.com/animation/css-transitions/