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

1 vote309 views1 answer
Css url do not change color of visited links
CSS
0 vote342 views1 answer
Why does my min and max-wodth only stay on min-width html css
CSS
3 votes326 views4 answers
Keep aspect ratio of image css
CSS
6 votes358 views1 answer
How to change hyperlink color in css
CSS
0 vote300 views1 answer
Space between span and svg in css
CSS
9 votes362 views3 answers
Bootstrap blue outline button
CSS Bootstrap
56 votes332 views6 answers
How to center divs in css
CSS
0 vote347 views1 answer
Media screen tablet
CSS
0 vote333 views2 answers
Also define the standard property 'background-clip' for compatibility
CSS
0 vote350 views1 answer
How to take only part of an image css
CSS