JSFiddle - React, Tailwind, and code Playground

by Pangur Ban

HTML

<a href="#" class="button"><span class="button-helper"></span>button</a>

CSS

a.button {
    position: relative;
    z-index: 9;
    display: inline-block;
    padding: 0 10px;
    
    background: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#a5c956));
    background: -webkit-linear-gradient(top,green,#a5c956);
    background:    -moz-linear-gradient(top,green,#a5c956);
    background:      -o-linear-gradient(top,green,#a5c956);
    background:         linear-gradient(top,green,#a5c956);
    }
.button-helper {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    opacity: 0;

    background: -webkit-gradient(linear, 0 0, 0 100%, from(lime), to(#89af37));
    background: -webkit-linear-gradient(top,lime,#89af37);
    background:    -moz-linear-gradient(top,lime,#89af37);
    background:      -o-linear-gradient(top,lime,#89af37);
    background:         linear-gradient(top,lime,#89af37);

    -webkit-transition: opacity 1s linear;
       -moz-transition: opacity 1s linear;
         -o-transition: opacity 1s linear;
            transition: opacity 1s linear;
    }

a.button:hover .button-helper
{
    opacity: 1;
}