JSFiddle - React, Tailwind, and code Playground

Pure CSS3 Buttons

by Jennifer Perrin

HTML

<a href="#" class="button">Button</a>
<a href="#" class="button red">Red Button</a>
<a href="#" class="button green">Green Button</a>
<a href="#" class="button blue">Blue Button</a>

CSS

body {
    background: #d6d6d6 url(http://i1208.photobucket.com/albums/cc369/sl1dr/noise.png) 0 0 repeat;
}
a {
    margin-bottom: 20px;
}
.button {
    border: 1px solid #444;
    border: 1px solid hsla(0,0%,0%,.4);
    border-radius: 5px;
    color: #222;
    color: hsla(0,0%,0%,.8);
    display: inline-block;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 20px;
    padding: 5px 25px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    -webkit-box-shadow: inset 0 1px hsla(0,0%,100%,.5), 
                        inset 0 12px hsla(0,0%,100%,.15), 
                        inset 0 8px 10px hsla(0,0%,100%,.25), 
                        inset 0 -12px 18px hsla(0,0%,0%,.25),
                        0 1px 0 hsla(0,0%,100%,.75);
    -moz-box-shadow: inset 0 1px hsla(0,0%,100%,.5), 
                     inset 0 12px hsla(0,0%,100%,.15), 
                     inset 0 8px 10px hsla(0,0%,100%,.25), 
                     inset 0 -12px 18px hsla(0,0%,0%,.25),
                     0 1px 0 hsla(0,0%,100%,.75);
    box-shadow: inset 0 1px hsla(0,0%,100%,.5), 
                inset 0 12px hsla(0,0%,100%,.15), 
                inset 0 8px 10px hsla(0,0%,100%,.25), 
                inset 0 -12px 18px hsla(0,0%,0%,.25),
                0 1px 0 hsla(0,0%,100%,.75);
    -webkit-transition:all .2s ease;
       -moz-transition:all .2s ease;
        -ms-transition:all .2s ease;
         -o-transition:all .2s ease;
            transition:all .2s ease;
}
.button:after {
    content: "\203a";
    margin-left: 5px;
    opacity: 0;
}
.button:hover,
.button:focus {
    -webkit-box-shadow: inset 0 1px hsla(0,0%,100%,.6), 
                        inset 0 12px hsla(0,0%,100%,.15), 
                        inset 0 8px 10px hsla(0,0%,100%,.35), 
                        inset 0 -12px 18px hsla(0,0%,0%,.25),
                        0 1px 0 hsla(0,0%,100%,.75);
   ...