3D КНОПКИ НА CSS3

3D КНОПКИ НА CSS3


Объемные кнопки на CSS3 имитирующие эффект нажатия. Работают во всех современных браузерах.

Разметка HTML
В демо представлено 7 цветовых вариантов данных кнопок.
Дефолтным является серый - grey цвет:
<a href="" class="button">Кнопка</a>


Для использования другого цвета у кнопки нужно просто добавить ещё один класс: red, orange, blue, green, purple или pink.
<a href="#" class="button pink">Кнопка</a>


Дополнительно можно добавить и различные варианты границы - border. По умолчанию граница имеет радиус 10px.
shield (скруглены два нижних угла), criss-cross (скруглены противолежащие стороны), one-corner (скруглена одна граница), rectangular (скруглены все границы):
<a href="#" class="button orange rectangular">Кнопка</a>


CSS
.black {
    background: #000;
    padding: 20px 20px 10px 20px;
}
.white {
    background: #fff;
    padding: 30px 20px 20px 20px;
}
.button {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 12px 20px;
    font-size: 18px;
    border-radius: 10px;
    background-color: #666666;    
    box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    display: inline-block;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
    margin-bottom: 40px;
}

    
.button:hover {
    box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.shield {
    border-radius: 5px 5px 35px 35px;    
    padding-left: 25px;
    padding-right: 25px;
}

.criss-cross {
    border-radius: 35px 5px;    
}


.rectangular {
    border-radius: 10px / 35px;
}

.one-corner {
    border-radius: 5px 5px 35px 5px;
    padding-right: 25px;
}

.pressure {
}

.button {
    margin-right: 20px;
}

.button:active {
    top: 7px;
    box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);    
}

.red {    
    background-color: #c34747;    
    box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.red:hover {
    box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.red:active {
    box-shadow: 0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
}

.orange {    
    background-color: #c37846;    
    box-shadow: 0 5px 5px #855031, 0 9px 0 #5e3a25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.orange:hover {
    box-shadow: 0 5px 5px #855031, 0 9px 0 #5e3a25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);    
}

.orange:active {
    box-shadow: 0 2px 0 #5e3a25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);    
}

.green {    
    background-color: #7fc345;    
    box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.green:hover {
    box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.green:active {
    box-shadow: 0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);    
}

.pink {
    box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
    background-color: #d7298b;
}

.pink:hover {
    box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.pink:active {
    box-shadow: 0 2px 0 #5e254c, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}

.blue {
    background: #2a8ad8;
    box-shadow: 0 5px 5px #364a8e, 0 9px 0 #25325e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.blue:hover {
    box-shadow: 0 5px 5px #364a8e, 0 9px 0 #25325e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}
.blue:active {
    box-shadow: 0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}

.purple {
    background-color: #8a26d3;
    box-shadow: 0 5px 5px #54307b, 0 9px 0 #3f255e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.purple:hover {
    box-shadow: 0 5px 5px #54307b, 0 9px 0 #3f255e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.purple:active {
    box-shadow: 0 2px 0 #42255e, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}


Скачать исходник:
Скачать файл: Desktop.rar [1,42 Kb] (cкачиваний: 3)
0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.