JSFiddle - React, Tailwind, and code Playground

by Sam Hewitt

HTML

<a href="#" target="" class="button blue">
    <span class="button-text">Blue Button</span>
</a>

<a href="#" target="" class="button red">
    <span class="button-text">Red Button</span>
</a>

CSS

/*----- Button -----*/

.button {
    display: inline-block;
    position:relative;
    margin:12px 0.5em 12px 0.5em;
    height:34px;
    width:16em;
    border-radius:0.25em;
    box-shadow:inset 0 -2px 0 0 rgba(0,0,0,0.2);
    opacity: 1.0;
    text-decoration:none;
    border: none;
    outline: none;
}

.button:hover {
    opacity: 0.9;
    border: none;
    outline: none;
}

.button:active {
    opacity: 1.0;
    height:32px;
    top: 2px;
    margin-bottom: 14px;
    border: none;
    outline: none;
    box-shadow: none;
}

/*----- Colours -----*/

.blue {
    /*background: linear-gradient(#2b8cff, #2173d5);*/
    background-color: #2173d5;
}

.red {
    /*background: linear-gradient(#e62826, #c51e1d);*/
    background-color: #c51e1d;
}

/*----- Text -----*/

.button-text {
    font-family:"Clear Sans";
    opacity:1.0;
    font-size:1em;
    font-weight:400;
    text-align:left;
    text-decoration:none;
    border:none;
    color:#fff;
    padding-left: 0.75em;
    line-height:2em;
}