JSFiddle - React, Tailwind, and code Playground

by pxfunc

HTML

<a class="button" href="#">
    <!-- Important: put not space between the following elements -->
    <span class="left">&nbsp;</span><span class="text">Text Text Text</span><span class="right">&nbsp;</span>
</a>

<br /><br />

<a class="button2" href="#">Text Text Text</a>

CSS

/* Button */
a.button{
    text-decoration: none;
    display: inline-block;
}

a.button span{
    text-decoration: none;
    display: inline-block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-weight: bold;
    height: 30px;
}

a.button .left, a.button .right{
    background-color: orange;
    width: 10px;
}

a.button .text{
    background-color: red;
    color: white;
}


/* Button 2 */
.button2 {
    background-color:red;
    border:solid 10px orange;
    border-top:0;
    border-bottom:0;
    display:inline-block;
    color:#fff;
    font-family: Arial,Helvetica,sans-serif;
    font-size:11px;
    font-weight:bold;
    line-height:30px;
    text-decoration:none;
    padding:0 3px;
}