JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<a class="button">VIEW OUR THEMES</a><br />
    <a class="button">CONTACT US</a>

CSS

body { padding: 35px; max-width: 480px; margin: 0 auto; }
    
.button {        
    display: block;        
    background-color: #009edc;       
    border-radius: 5px;        
    position: relative;       
    width: 170px;         
    height: 22px;    
    color: #FFF;    
    font-weight: bold;    
    font-size: 20px;    
    text-align: center;
    font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue";
    padding: 5px 5px;
    transition: .07s all ease-in-out;
    -moz-transition: .07s all ease-in-out;
    -webkit-transition: .07s all ease-in-out;
   
}

    .button:hover{
    box-shadow: 1px 1px 0 #04618c,2px 2px 0 #04618c,3px 3px 0 #04618c,4px 4px 0 #04618c,5px 5px 0 #04618c;
    top: -5px;
    left: -5px;
    }

    .button:active {
    box-shadow: 0px 0px 0 #000;
    left: 0px;
    top: 0px;
    }

JavaScript

// http://j.mp/tzUKjY
// http://twitter.com/genelocklin