<a href="#" target="" class="button blue"> <span class="button-text">Blue Button</span> </a> <a href="#" target="" class="button red"> <span class="button-text">Red Button</span> </a>
/*----- Button -----*/ .button { display: inline-block; position:relative; margin:12px 0.5em 12px 0.5em; height:34px; width:16em; border-radius:0.25em; box-shadow:inset 0 -2px 0 0 rgba(0,0,0,0.2); opacity: 1.0; text-decoration:none; border: none; outline: none; } .button:hover { opacity: 0.9; border: none; outline: none; } .button:active { opacity: 1.0; height:32px; top: 2px; margin-bottom: 14px; border: none; outline: none; box-shadow: none; } /*----- Colours -----*/ .blue { /*background: linear-gradient(#2b8cff, #2173d5);*/ background-color: #2173d5; } .red { /*background: linear-gradient(#e62826, #c51e1d);*/ background-color: #c51e1d; } /*----- Text -----*/ .button-text { font-family:"Clear Sans"; opacity:1.0; font-size:1em; font-weight:400; text-align:left; text-decoration:none; border:none; color:#fff; padding-left: 0.75em; line-height:2em; }