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

10 votes364 views2 answers
Remove underline on hover span
CSS
0 vote415 views1 answer
How to apply a transition to a child element when hovering over parent element
CSS
1 vote335 views1 answer
Css no list markers
CSS
0 vote364 views1 answer
Css pagedList
CSS
1 vote332 views1 answer
Change angular material icon color
CSS
0 vote344 views2 answers
How to do addition or subtraction on CSS Variables?
CSS
0 vote350 views1 answer
Css color gradient background full height
CSS
0 vote355 views1 answer
Beautiful checkbox css
CSS
0 vote350 views3 answers
Sass use variables from another file
CSS
0 vote337 views1 answer
Text-overflow ellipsis hover tooltip css
CSS