JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="orangeButton">Trololol</a>

CSS

.orangeButton
{
    color: #FFF;
    padding: 10px;
    display: block;
    font: 12px Verdana, Helvetica, serif;
    line-height: 18px;
    text-decoration: none;
    text-align: center;
    position: relative;
    cursor: pointer;
    border: 1px solid #f04d12;
    background-color: #F04D12;
    background: none repeat-x top left #F04D12;
    background-image:  url(http://stretchbox.org/testing/QFoch/img/orangeButton.jpg);
    background-image:  url(http://stretchbox.org/testing/QFoch/img/orangeButton.svg);
    background-size: 250% 100%;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px 8px 8px 8px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: border-box;
}