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 vote219 views1 answer
Css 2 div cote à cote
CSS
27 votes220 views4 answers
Unselectable text css
CSS
1 vote240 views1 answer
How to scale a bg image acc to size of div
CSS
-1 vote207 views1 answer
Add css to express app
CSS
1 vote219 views1 answer
How to make a relative div not take up space
CSS
0 vote207 views1 answer
Hovered one element change styles for another css
CSS
3 votes197 views1 answer
Css scrollbar position to bottom
CSS
1 vote227 views1 answer
How to include a new font website
CSS
0 vote194 views1 answer
Css code for increasing size
CSS
0 vote210 views2 answers
Align ionic icons and text css
CSS