JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<a class="smaller" href="#">Download</a>
<br />
<a href="#">Download</a>
<br />
<a class="larger" href="#">Download</a>

CSS

a {
    margin: 20px;
    display: inline-block;
    padding: 12px 12px 12px 45px;
    
    background: #0D3D6D url('http://www.mediafire.com/imgbnc.php/fefafc2eb9f756d6e9306a9e4fa75aa03bf3d9a3274840eb431ccdb44b2fff9d5g.jpg') no-repeat 9px 5px;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #0A2D50;
    
    color: #D9E8FF;
    font-family: Verdana, Arial, Sans-Serif;
    text-decoration: none;
}
a.smaller {
    padding: 5px 10px;
    background-image: none;
}
a.larger {
    background-position: 9px 9px;
    font-size: 20px;
}



a:focus, a:hover {
    background-color: #1A4A7A;
}



a:active {
    padding-top: 13px; padding-bottom: 11px;
    background-color: #0D4174;
    background-position: 9px 6px;
    
    -webkit-box-shadow: inset 0px 1px 6px 0px #000000;
    -moz-box-shadow: inset 0px 1px 6px 0px #000000;
    box-shadow: inset 0px 1px 6px 0px #000000;
}
a.smaller:active {
    padding-top: 6px; padding-bottom: 4px;
}
a.larger:active {
    background-position: 9px 10px;
    font-size: 20px;
}