JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<a href="#" class="dark-orange-button">Button One, Short</a>

    <a href="#" class="dark-orange-button">Button Two, This one has a much longer description and wraps</a>

CSS

.dark-orange-button
{
    -moz-box-shadow: inset 0px 1px 0px 0px #fed897;
    -webkit-box-shadow: inset 0px 1px 0px 0px #fed897;
    box-shadow: inset 0px 1px 0px 0px #fed897;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
    background: -moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#f6b33d' , endColorstr= '#d29105' );
    background-color: #f6b33d;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    border: 3px solid #eda933;
    
    display: table-cell;    
    vertical-align: middle;
    
    color: #ffffff;
    font-family: arial;
    font-size: 15px;
    font-weight: bold;
    width: 300px;
    height: 70px;
    text-align:center;
    padding: 0 56px;
    text-decoration: none;
    text-shadow: 1px 1px 0px #cd8a15;
}
.dark-orange-button:hover
{
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d29105), color-stop(1, #f6b33d) );
    background: -moz-linear-gradient( center top, #d29105 5%, #f6b33d 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#d29105' , endColorstr= '#f6b33d' );
    background-color: #d29105;
}

.dark-orange-button:active
{
    position: relative;
    top: 1px;
}

.area
{
    float:left:
    
}