JSFiddle - React, Tailwind, and code Playground

by Sam Hewitt

HTML

<div class="button"><a class="button-text" href="irc://irc.freenode.net:6667/ubuntu-on-air">Join from your IRC Client!</a></div>

CSS

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

.button, a .button {
    display:inline-block;
    position:relative;
    height:34px;
    width:16em;
    margin:12px 0 12px 0;
    border-radius:0.25em;
    box-shadow:inset 0 -2px 0 0 rgba(0,0,0,0.2);
    background-color: #dd4814;
    opacity: 1.0;
    border:none;
    outline: none;
    transition:none;
    -webkit-transition:none;
}

.button:hover, a.button:hover {
    opacity: 0.95;
    border: none;
    outline: none;
    transition:none;
    -webkit-transition:none;
}

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

.button-text {
    font-family:"Ubuntu" sans-serif;
    text-align:center;
    text-decoration:none;
    border:none;
    outline:none;
    color:white;
    opacity:1.0;
    font-size:1em;
    margin-left: 0.5em;
    font-weight:400;
    text-align:left;
    text-decoration:none;
    border:none;
    line-height:2em;
}