JSFiddle - React, Tailwind, and code Playground

by craigm

HTML

<button class="add">Add</button>
<button class="edit">Edit</button>
<button class="delete">Delete</button>
<div></div>
<button class="ok">Ok</button>
<button class="cancel">Cancel</button>
<div></div>
<button class="back">Back</button>
<button class="forward">Forward</button>
<div></div>
<button class="previous2">First</button>
<button class="previous">Previous</button>
<button class="next">Next</button>
<button class="next2">Last</button>
<div></div>
<button class="help">Help</button>
<button class="star">Star</button>
<button class="reply">Reply</button>
<button class="play">Play</button>
<button class="like">Like</button>

CSS

button {
    position: relative;
    display: inline-block;
    font-family: Arial, Helvetica;
    font-size: 90%;
    font-style: normal;
    color: rgba(0,0,0,.8);
    border: 1px solid #ccc;
    border-radius: .25em;
    padding: 0.25em 1em;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    background-color: rgba(0,0,0,0.08);
    background-image: -webkit-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%);
    background-image: -moz-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%);
    background-image: -ms-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%);
    background-image: -o-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%);
    background-image: linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%);
}

button:hover {
    box-shadow: 0 0 2px rgba(0,0,0,.2);
    background-image: -webkit-linear-gradient(rgba(255,255,255,0.9) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.07) 85%);
    background-image: -moz-linear-gradient(rgba(255,255,255,0.9) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.07) 85%);
    background-image: -ms-linear-gradient(rgba(255,255,255,0.9) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.07) 85%);
    background-image: -o-linear-gradient(rgba(255,255,255,0.9) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.07) 85%);
    background-image: linear-gradient(rgba(255,255,255,0.9) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.07) 85%);
}

button:active {
    top: 1px;
    box-shadow: 0 1px 1px rgba(0,0,0,.1) inset;
    background-image: -webkit-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%);
    background-image: -moz-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%);
    background-image:...