JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">aosgibmoa bnocibnas</a>

CSS

a{
    display:inline-block;
    background:green;
    position:relative;
    padding:2px 5px;
    background: -webkit-gradient(linear, left top, right top, color-stop(50%,red), color-stop(50.001%,green));
    background-size:200% 100%;
    background-position:0 0;
    -webkit-transition:background-position .3s ease-out;
}

a:hover{
    background-position:-100% 0;
}