CSS buttons

by Олексій Рачок

HTML

<div id="container">
    
        <h4>Default Button style</h4>
        
        <p>
        
            <a href="#" class="button">Button</a>
            
            <a href="#" class="button heavy">Big Button</a>
            
            <a href="#" class="button light">Small Button</a>
            
            <a href="#" class="button lozenge">Rounded Button</a>
            
            <a href="#" class="button scale">Animated Button</a>
            
            <a href="#" class="button chunky">Chunky Button</a>
        
        </p>
        
        <h4>Red Buttons</h4>
        
        <p>
        
            <a href="#" class="button red">Button</a>
            
            <a href="#" class="button red heavy">Big Button</a>
            
            <a href="#" class="button red light">Small Button</a>
            
            <a href="#" class="button red lozenge">Rounded Button</a>
            
            <a href="#" class="button red scale">Animated Button</a>
            
            <a href="#" class="button red chunky">Chunky Button</a>
            
            
            <a href="#" class="button red-pastel">Button</a>
            
            <a href="#" class="button red-pastel heavy">Big Button</a>
            
            <a href="#" class="button red-pastel light">Small Button</a>
            
            <a href="#" class="button red-pastel lozenge">Rounded Button</a>
            
            <a href="#" class="button red-pastel scale">Animated Button</a>
            
            <a href="#" class="button red-pastel chunky">Chunky Button</a>
        
        </p>
        
        
        <h4>Orange Buttons</h4>
        
        <p>
        
            <a href="#" class="button orange">Button</a>
            
            <a href="#" class="button orange heavy">Big Button</a>
            
            <a href="#" class="button orange light">Small Button</a>
            
            <a href="#" class="button orange lozenge">Rounded...

CSS

@import url("http://fonts.googleapis.com/css?family=Maven+Pro");

* {
    resize: none;
    border: none;
    outline: none;
    text-decoration: none;
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-family: 'Maven Pro';
}

body {
    background: #c0c0c0;
    margin-top: 40px;
    margin-left: 40px;
    margin-bottom: 40px;
}

a.button, input.button {
    font-size: 1em !important;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-weight: bold;
    margin-bottom: 60px;
    padding: .4em 1.25em;
    color: #4c4c4c;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 6px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 6px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 6px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#d4d4d4));
    background: -webkit-linear-gradient(#f6f6f6, #d4d4d4);
    background-image: -moz-linear-gradient(top, #f6f6f6, #d4d4d4);
    background-image: -moz-gradient(top, #f6f6f6, #d4d4d4);
    border: 1px solid #a1a1a1;
}

a.button:hover, input.button:hover {
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#ececec));
    background: -webkit-linear-gradient(#f6f6f6, #ececec);
    background-image: -moz-linear-gradient(top, #f6f6f6, #ececec);
    background-image: -moz-gradient(top, #f6f6f6, #ececec);
}

a.button:active, input.button:active {
    top: 1px;
    background: #ececec;
    background: -webkit-gradient(linear, left top, left bottom, from(#ececec), to(#f6f6f6));
   ...