JSFiddle - React, Tailwind, and code Playground

by Joe Pigott

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<button><span class='fa fa-cog fa-2x'></span></button>

CSS

button {
    height: 30px;
    width: 55px;
    border: 1px solid #c4c4cc;
    background: #f9f9f9;
    transition: 0.2s linear
}
button:hover {
    border: 1px solid #aeaea3;
    border-bottom: 3px solid #aeaea3;
}
button:active {
    border-bottom: 1px solid #aeaea3;
    border-top: 3px solid #aeaea3
}
button:focus {
    outline: 0;
}