JSFiddle - React, Tailwind, and code Playground

by lukempeters

HTML

<a href="" class="button">Button</a>

CSS

body {
    margin: 0;
    padding: 30px;
    height: 485px;
    font-family: Arial, Tahoma;
    font-size: 16px;
    background: #666666;
    box-shadow: 0 200px 200px rgba(255,255,255,0.3) inset;
}

.button, .button:visited {
    padding: 10px 18px 10px 18px;
    letter-spacing: 0.08em;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    text-decoration: none;
    color: rgba(0,0,0,0.65);
    border-top: 1px solid rgba(255,255,255,0.4);
    border-bottom: 1px solid rgba(0,0,0,0.4);
    border-radius: 8px;
    background: #9999ff;
    box-shadow: 0 -6px 16px rgba(0,0,0,0.2) inset;
    -moz-transition: all .2s ease;
}

.button:hover {
    border-bottom: 1px solid rgba(0,0,0,0.5);
    box-shadow: 0 -6px 16px rgba(0,0,0,0.4) inset;
    background: #ddddff;
}