JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <a href="#" class="button blue">Et un autre</a>
</p>

CSS

body {
    font-family: sans-serif;
    font-size: 0.75em;
}

.button {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid;
    border-radius: 8px;

    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);

    background-image:-moz-linear-gradient(
            top
        ,    rgba(255,255,255,.6) 0%
        ,    rgba(255,255,255,.3) 50%
        ,    rgba(255,255,255,.0) 51%
        ,    rgba(255,255,255,.6) 100%
    );
    
    background-image:-webkit-linear-gradient(
            top
        ,    rgba(255,255,255,.6) 0%
        ,    rgba(255,255,255,.3) 50%
        ,    rgba(255,255,255,.0) 51%
        ,    rgba(255,255,255,.6) 100%
    );
    
    
    -moz-transition-property: background-color, color;
    -moz-transition-duration: 0.2s;

    -webkit-transition-property: background-color, color;
    -webkit-transition-duration: 0.2s;   
}

.button.blue {
    background-color: #0670AA;
    border-color: #0E74BC
}

.button.blue:hover, .button.blue:focus {
    background-color: #00F;
    color: #000;
}