CSS Buttons

Pill buttons

by secretgspot

HTML

<!-- TIP: Add 'round-corners' to the class field to round the edges of any button (ie. <a class="btn_white gradient round-corners">) -->

<div class="container">

    <ul><!--Large Buttons-->
        <li><a href="#" class="btn_white gradient"><div class="large">Big 'ol Button</div></a></li>
        <li><a href="#" class="btn_gray gradient"><div class="large">Big 'ol Button</div></a></li>
        <li><a href="#" class="btn_black gradient"><div class="large">Big 'ol Button</div></a></li>
        <li><a href="#" class="btn_blue gradient"><div class="large">Big 'ol Button</div></a></li>
        <li><a href="#" class="btn_green gradient"><div class="large">Big 'ol Button</div></a></li>
        <li><a href="#" class="btn_red gradient"><div class="large">Big 'ol Button</div></a></li>
        <br class="clear">
    </ul>
        
    <ul><!--Regular Buttons-->
        <li><a href="#" class="btn_white gradient"><div class="regular">Button</div></a></li>
        <li><a href="#" class="btn_gray gradient"><div class="regular">Button</div></a></li>
        <li><a href="#" class="btn_black gradient"><div class="regular">Button</div></a></li>
        <li><a href="#" class="btn_blue gradient"><div class="regular">Button</div></a></li>
        <li><a href="#" class="btn_green gradient"><div class="regular">Button</div></a></li>
        <li><a href="#" class="btn_red gradient"><div class="regular">Button</div></a></li>
        <br class="clear">
    </ul>
    
    <ul><!--Rounded Buttons -->
        <li><a href="#" class="btn_white gradient round-corners"><div class="regular">Button</div></a></li>
        <li><a href="#" class="btn_gray gradient round-corners"><div class="regular">Button</div></a></li>
        <li><a href="#" class="btn_black gradient round-corners"><div class="regular">Button</div></a></li>
        <li><a href="#" class="btn_blue gradient round-corners"><div class="regular">Button</div></a></li>
        <li><a href="#" class="btn_green gradient...

CSS

@charset "UTF-16";

body{
                background: #25272a url(bg.png) repeat;
                font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
                font-size: 14px;
            }
            
            .container {
                border-radius: 5px;
                background: rgba(0, 0, 0, 0.3);
                box-shadow: inset 0px 5px 10px rgba(0, 0, 0, .7), 0px 0px 5px rgba(255, 255, 255, 0.2);
                margin: 0 auto;
                margin-top: 50px;
                margin-bottom: 50px;
                width: 760px;
                overflow: hidden;
                padding: 20px 20px 30px 20px;
            }
            
            .clear {
                clear: both;
            }
            
            ul {
                list-style: none;
                border-bottom: 1px solid #111;
                box-shadow: 0px 1px 0px #343434;
                padding-bottom: 20px;
                margin-bottom: 40px;
            }
            
            ul li {
                float: left;
                display: inline-block;
                margin: 0 20px 0 0;
            }




/*---------------ICON FONT---------------*/

/*
Signify Lite: Free Icon Font by MediaLoot
Replace with Signify (full version) if owned
*/

@font-face {
    font-family: 'SignifyLite';
    src: url('signifylite-webfont.eot');
    src: url('signifylite-webfont.eot?#iefix') format('embedded-opentype'),
         url('signifylite-webfont.woff') format('woff'),
         url('signifylite-webfont.ttf') format('truetype'),
         url('signifylite-webfont.svg#SignifyLite') format('svg');
    font-style: normal;
}

.icon {
    font-family: 'SignifyLite'; 
    font-weight: 100; 
    font-size: 16px; 
    margin: 0px 0px 0px 0px;
    padding: 0px 8px 0px 0px;
    line-height: 26px; 
    height: 32px; 
    display: inline-block;
    float: left;
    border-right: 1px solid rgba(0,0,0,0.2);
}

.label {
    display: inline-block;
    font-weight:...