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

3 votes328 views1 answer
Add new class in tailwind css
CSS
0 vote374 views2 answers
Change color select arrow css cf7
CSS
0 vote326 views1 answer
Change "no file chosen" pseudo css contact form 7
CSS
1 vote346 views1 answer
Input start typing in the center
CSS
0 vote374 views1 answer
Nokogiri xml diff
CSS
1 vote336 views1 answer
Css @media measurements
CSS
27 votes334 views1 answer
Css how to create gradients on text outline
CSS
2 votes348 views1 answer
Autofit grid css
CSS
0 vote487 views1 answer
Bootstrap 5 css how to change
CSS Bootstrap
1 vote364 views2 answers
Round one side of div css
CSS