guide: buttons

HTML

<div class="wrapper">
    <div class="big">
    <button class="button casual">Обычная</button>
    <button class="button casualDisabled" disabled="disabled">Аморфная</button>

    <button class="button major">Важная</button>
    <button class="button majorDisabled" disabled="disabled">Аморфная</button>
</div>

<div class="small">
    <button class="button_small casual_small">Обычная</button>
    <button class="button_small casualDisabled" disabled="disabled">Аморфная</button>

    <button class="button_small major_small">Важная</button>
    <button class="button_small majorDisabled" disabled="disabled">Аморфная</button> 
</div>

</div>

CSS

body
{
    background-color: #fff;
}

.button
{
    margin: 0px auto;
    margin-top: 30px;
    position: relative;
    top: 0;
    font-family: 'Segoe UI';
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    display: block;
    outline:none;
}

.casual
{
    color: #404040;
    background-color:#EDEDED;
    box-shadow: 0px 4px 0px #D9D9D9;
}

.major
{
    color: #fff;
    background-color:#3390D8;
    box-shadow: 0px 4px 0px #2972AE;
}

.major:hover
{
    box-shadow: 0px 5px 0px #2972AE;
    top: -1px;
}

.major:active
{
    box-shadow: none;
    top: 4px;
}


.casual:hover
{
    box-shadow: 0 5px 0px #CFCFCF;
    top: -1px;
}

button.casual:active  /*почему не работает без указания тега?!*/
{
    box-shadow: none;
    top:4px;
}


.casualDisabled:disabled
{
    color: #b7b7b7;
    background-color:#EDEDED;
    box-shadow: none;
    cursor:default;
}

.majorDisabled
{
    color: rgba(255, 255, 255, 0.5);
    background-color:#3390D8;
    box-shadow: none;
    cursor:default !important;
}


/*--------------мелкие--------------*/
.button_small
{
    margin: 0px auto;
    margin-top: 38px;
    position: relative;
    top: 0;
    font-family: 'Segoe UI';
    font-size: 16px;
    padding: 5px 20px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    display: block;
    outline:none;
}

.casual_small
{
    color: #404040;
    background-color:#EDEDED;
    box-shadow: 0px 2px 0px #D9D9D9;
}

.major_small
{
    color: #fff;
    background-color:#3390D8;
    box-shadow: 0px 2px 0px #2972AE;
}

.major_small:hover
{
    box-shadow: 0px 3px 0px #2972AE;
    top: -1px;
}

.major_small:active
{
    box-shadow: none;
    top: 3px;
}


.casual_small:hover
{
    box-shadow: 0 3px 0px #CFCFCF;
    top: -1px;
}

button.casual_small:active  /*почему не работает без указания тега?!*/
{
    box-shadow: none;
    top:3px;
}

.small {float: right;}
.big {float: left; }
.wrapper { width: 300px; margin: 0...