3D Кнопки

Набор стилей для 3d кнопок основанный на twitter bootstrap

by Andrey Dobrovoi

HTML

<div class="container">
    <h2>Привлекательные 3D Кнопки</h2>
        <div class="well">
            <button type="button" class="btn btn-hot btn-xs">Кнопка 1</button>
            <button type="button" class="btn btn-sunny btn-xs">Кнопка 2</button>
            <button type="button" class="btn btn-fresh btn-xs">Кнопка 3</button>
            <button type="button" class="btn btn-sky btn-xs">Кнопка 4</button>
        </div>
        <div class="well">
            <button type="button" class="btn btn-hot btn-sm">Кнопка 1</button>
            <button type="button" class="btn btn-sunny btn-sm">Кнопка 2</button>
            <button type="button" class="btn btn-fresh btn-sm">Кнопка 3</button>
            <button type="button" class="btn btn-sky btn-sm">Кнопка 4</button>
        </div>
        <div class="well">
			<button type="button" class="btn btn-hot btn-md">Кнопка 1</button>
            <button type="button" class="btn btn-sunny btn-md">Кнопка 2</button>
            <button type="button" class="btn btn-fresh btn-md">Кнопка 3</button>
            <button type="button" class="btn btn-sky btn-md">Кнопка 4</button>
        </div>
        <div class="well">
            <button type="button" class="btn btn-hot btn-lg">Кнопка 1</button>
            <button type="button" class="btn btn-sunny btn-lg">Кнопка 2</button>
            <button type="button" class="btn btn-fresh btn-lg">Кнопка 3</button>
            <button type="button" class="btn btn-sky btn-lg">Кнопка 4</button>
        </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=latin,cyrillic);

body{
    font-family: 'Open Sans', sans-serif;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

h2{
    font-size: 30px;
    font-weight: 400;
    line-height: 1.1; 
    margin-top: 20px;
    margin-bottom: 10px;
}
.well{
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    text-align: center;
}

.btn {    
display: inline-block;
margin: 4px;
box-shadow: 1px 1px 5px #888888;    
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-xs{
    border-radius: 3px;
    font-size: 12px;
    padding: 1px 5px;
    line-height: 1.5;
}
.btn-sm{
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    text-transform: uppercase;
}
.btn-md{
text-transform: uppercase;
}
.btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
text-transform: uppercase;    
}
.btn-hot {
color: #fff;
background-color: #db5566;
border-bottom:2px solid #af4451;
}

.btn-hot:hover, .btn-hot:focus{
color: #fff;
background-color: #df6a78;
border-bottom:2px solid #b25560;
outline: none;}


.btn-hot:active {
color: #fff;
background-color: #c04b59;
border-top:2px solid #9a3c47;
margin-top: 2px;
}

.btn-sunny {
color: #fff;
background-color: #f4ad49;
border-bottom:2px solid #c38a3a;
}

.btn-sunny:hover, .btn-sunny:focus{
color: #fff;
background-color: #f5b75f;
border-bottom:2px solid...