CSS UI Elements

by secretgspot

HTML

<div class="big-like-button-wrapper">
    <a href="#" class="button like"><em>H</em> Like</a>
</div>

CSS

/* Buttons */

.big-like-button-wrapper {
    width: 96px;
    background: #E0E0E0;
    padding: 6px;
    box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
    border-radius: 32px;
}

.button.like {
    display: inline-block;
    width: 96px;
    height: 35px;
    font-size: 18px;
    line-height: 28px;
    text-decoration: none;
    border-radius: 32px;
    font-weight: bold;
    
    background: #F5F5F5; 
    color: #858585;
    text-shadow: 0px 1px 0px #fff;
    box-shadow: inset 0px 1px 0 #fff, 0px 1px 0 #B5B5B5;
}
.button.like:hover, .button.like:active { border: none; }
.button.like:hover { background: #fff;  color: #717171; }
.button.like:active {
    background: #eee;
    color: #717171;
    box-shadow: inset 0px 2px 3px #aaa, 0px 1px 0 #B5B5B5;
}
.button.like em { color: pink; 
margin: 0 9px;
font-size: 28px;
line-height: 28px; 
font-family: 'SignifyLite';
}

@font-face {
  font-family: 'SignifyLite';
  src: url("http://dev.kuzya.com/Aerotour/AerotourCR-12/assets/fonts/signifylite-webfont.eot");
  src: url("http://dev.kuzya.com/Aerotour/AerotourCR-12/assets/fonts/signifylite-webfont.eot?#iefix") format("embedded-opentype"), url("http://dev.kuzya.com/Aerotour/AerotourCR-12/assets/fonts/signifylite-webfont.woff") format("woff"), url("http://dev.kuzya.com/Aerotour/AerotourCR-12/assets/onts/signifylite-webfont.ttf") format("truetype"), url("http://dev.kuzya.com/Aerotour/AerotourCR-12/assets/fonts/signifylite-webfont.svg#SignifyLite") format("svg");
  font-weight: normal;
  font-style: normal; }