JSFiddle - React, Tailwind, and code Playground

HTML

<input type="submit" value="submit" class="gradient" /><br />
<input type="button" value="button" class="gradient" /><br />
<a href="" class="gradient">Link</a>

CSS

.gradient {
    margin: 10px;
    border:solid 1px #666666; 
    color: #000000; 
    padding: 4px 4px 3px; 
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6); 
    font-weight: bold; 
    font-size: 90%;
    text-transform: uppercase; 
    text-decoration: none;
    cursor: pointer; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    background-image: -moz-linear-gradient(top, #20799d, #5cb9df); /* FF3.6 */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #20799d),color-stop(1, #5cb9df)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#20799d, #5cb9df); /* Chrome 10+, Saf6 */
    background-image: linear-gradient(top, #20799d, #5cb9df); 
    font-family: Arial, Helvetica, sans-serif;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#20799d', EndColorStr='#5cb9df'); /* IE6–IE9 */ 
}