JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<button class="lite"></button>
<button class="blue"></button>
<button class="pink"></button>
<button class="dark"></button>

SCSS

html { font-size: 87.5% }
body { padding: 1em }
$button-gradient:
    rgba(  0,  0,  0,.15)   0%,
    rgba(  0,  0,  0,  0)  25%,
    rgba(255,255,255,  0)  25%,
    rgba(255,255,255,.15)  50%,
    rgba(255,255,255,  0)  75%,
    rgba(  0,  0,  0,  0)  75%,
    rgba(  0,  0,  0,.15) 100%;
button {
    margin: 0 1em 1em 0;
    padding: 0.5em 1.5em;
    overflow: visible;
    font-size:   1em;
    line-height: 1.5em;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 2px;
    color: rgba(0,0,0,.5);
    text-shadow: 0 1px rgba(255,255,255,.15);
    cursor: pointer;
    background-image: -webkit-linear-gradient(top, $button-gradient);
    background-image:    -moz-linear-gradient(top, $button-gradient);
    background-image:   linear-gradient(to bottom, $button-gradient);
    background-position: bottom center;
    background-size: 200%;
    -webkit-transition: all .05s ease-out;
    &:hover {
        background-position-y: 75%;
        background-size: 400%;
        border-color: rgba(0,0,0,.15);
        box-shadow:
            0 2px 4px rgba(0,0,0,.1),
            0 0   1px rgba(0,0,0,.25) }
    &:active {
        background-position-y: top;
        background-size: 200%;
        border-color:        rgba(0,0,0,.3);
        border-top-color:    rgba(0,0,0,.4);
        border-bottom-color: rgba(0,0,0,.2);
        box-shadow:
            inset 0 2px 4px rgba(0,0,0,.3),
            inset 0 2px 10px rgba(0,0,0,.1) }
    &:focus {
        outline: 1px solid rgba(255,255,255,.4);
        outline-offset: -2px }
    &.blue { background-color: #1fb8eb }
    &.pink { background-color: #e34cac }
    &.dark {
        background-color: #595959;
        color: rgba(255,255,255,.5);
        text-shadow: 0 -1px 0 rgba(0,0,0,.25); }
    &:before {
        content: attr(class) " Power!";
        text-transform: capitalize; }
}