Button transition

div {
    font: 22px Arial;
    display: inline-block;
    padding: 1em 2em;
    text-align: center;
    color: white;
    background: red; /* default color */

    /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}
div:hover {
    background-position: left;
}

Source: stackoverflow.com

Similar codes

0 vote209 views1 answer
Css select first immediate child
CSS
29 votes200 views4 answers
How to remove underline of link in css
CSS
0 vote187 views1 answer
Css add required asterisk after
CSS
1 vote205 views1 answer
Css access span class inside div
CSS
0 vote242 views1 answer
How to apply a transition to a child element when hovering over parent element
CSS
0 vote224 views2 answers
Modal pop up html css
CSS
3 votes203 views1 answer
Add new class in tailwind css
CSS
0 vote213 views1 answer
Poner en input signo dolar con css
CSS
2 votes186 views1 answer
Minimum margin css
CSS
0 vote215 views1 answer
Animating a text in css
CSS