Buttons

Button inventory for Beautylish

by someprimetime

HTML

<h1>Btn Danger</h1>
        <button class="btn danger">X</button>
    <button class="btn danger">Delete</button>
    <button class="btn danger">Action</button>
    <button class="btn small danger">EDIT</button>
    <br /><br />
    <h1>Btn Default</h1>
        <button class="btn default">Cancel</button>
    <button class="btn default">Update</button>
    <button class="btn default">Reply</button>
    <button class="btn small default">Helpful</button>
    <br /><br />
        <h1>Btn Primary</h1>
    <a class="btn large primary">Add Picture...</a>
    <br /><br />
    <button class="btn primary">Post Review</button>
    <button class="btn primary">Suggest It!</button>
    <button class="btn primary">Go!</button>
    <br /><br />
    <h1>Like Button</h1>

<span><a class="btn primary">Like</a><span class="gothic count">101</span></span>

CSS

@font-face {
    font-family: 'av_sans';
    src: url('//d2fnvd4ktxiyvh.cloudfront.net/webfont/av_light.eot');
    src: url('//d2fnvd4ktxiyvh.cloudfront.net/webfont/av_light.eot?#iefix') format('embedded-opentype'),
        url('//d2fnvd4ktxiyvh.cloudfront.net/webfont/av_light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'av_sans';
    src: url('//d2fnvd4ktxiyvh.cloudfront.net/webfont/av_heavy.eot');
    src: url('//d2fnvd4ktxiyvh.cloudfront.net/webfont/av_heavy.eot?#iefix') format('embedded-opentype'),
        url('//d2fnvd4ktxiyvh.cloudfront.net/webfont/av_heavy.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'letter_gothic';
    src: url('//d2fnvd4ktxiyvh.cloudfront.net/webfont/letter_gothic_medium.eot');
    src: url('//d2fnvd4ktxiyvh.cloudfront.net/webfont/letter_gothic_medium.eot?#iefix') format('embedded-opentype'),
        url('//d2fnvd4ktxiyvh.cloudfront.net/webfont/letter_gothic_medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.btn {
    text-transform: uppercase;
font: bold 12px 'av_sans', Helvetica, Arial, sans-serif;
color: #0F2326;
cursor: pointer;
display: inline-block;
padding: 6px 8px;
}
.btn:active {
    position: relative;
    top: 1px;
}
.btn.danger {
background: #58595B;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
border: 1px solid transparent;
border-top: 1px solid #454648;
border-right: 1px solid #454648;
border-bottom: 2px solid #454648;
border-left: 1px solid #454648;
}

.btn.danger:hover {
background: #231f20;
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.5);
box-shadow: inset 0 1px 0 rgba(0,0,0,0.5);
border-bottom-color: #000;
}

.btn.danger:active {
margin-top: 1px;
-webkit-box-shadow: inset 0 1px 0 rgba(64,65,67,0.5);
box-shadow: inset 0 1px 0 rgba(64,65,67,0.5);
border-bottom: 1px solid #404143;
}

.btn.primary {
background: #5FF2B2;
border-top: 1px solid...