Создать с помощью css объемную кнопку с эффектом нажатия без фотошопа и javascripta

Новое время и новые веяния в дизайне диктуют свои правила. Этот долбаный web 2.0))) Зато стало явно красивей.

Итак, цель: Нужно забабахать объемную динамическую кнопку не использую photoshop да и еще без джаваскрипта, типа для ленивых))

КСС позволили заменить в некоторых случаях JS, а CSS3 шагнул еще дальше. Они позволяют заменить фотошоп! (Урааа! Свершилось!!!). И сейчас каскадные таблицы стилей пригодятся для проектирования  объемной  динамической кнопки-ссылки (3 состояния: при наведении, покоя, и нажатии).

Универсальна методика для создания динамических кнопок позволяет получит следующее:

1. Такие кнопки могут тянуться до бесконечности. Все зависит от длины текста.
2. Углы могут быть как угодно закруглены, или нет
3. Вся площадь кликабельна.
4. При отключенных изображениях видна
5. Не нужно!!! рисовать в PS или муторошно искать готовый рисунок кнопки))

Как я писал выше, кнопка будет менять вид в 3х случаях:

1. когда наведен курсор
2. когда произведено нажатие
3. ну и по дефолту

Конструкция

<a href="#" class="bttn"><span>Динамическая кнопка</span></a>

Кнопни мну




.bttn{

display: block;
padding: 10px;
text-decoration: none;

font-size: 30px;
font-weight: bold;
color: #FE63BB;
float: left;  /* кнопка растягивается только на длину текста */
position: relative;/* изменяя в дальнейшем top, добиться эффекта нажатия*/
/* закругляем углы */
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
/* делаем градиент (эффект выпуклости)*/

background:-moz-linear-gradient(top,rgba(238,238,238,1)50%,rgba(195,195,195,1)100%);
background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(50%,rgba(238,238,238,1)),color-stop(100%,rgba(195,195,195,1)));
background:-webkit-linear-gradient(top,rgba(238,238,238,1)50%,rgba(195,195,195,1)100%);
background:-o-linear-gradient(top,rgba(238,238,238,1)50%,rgba(195,195,195,1)100%);
background:-ms-linear-gradient(top,rgba(238,238,238,1)50%,rgba(195,195,195,1)100%);
background:linear-gradient(top,rgba(238,238,238,1)50%,rgba(195,195,195,1)100%);

/* тень, которую отбрасывает кнопка)*/ 
-moz-box-shadow:1rgba(0, 0, 0, .30) 2px 2px 2px;
-webkit-box-shadow:rgba(0, 0, 0, .30) 2px 2px 2px;
box-shadow:rgba(0, 0, 0, .30) 2px 2px 2px;

text-shadow: white 0px 1px 0;
border: 1px solid rgba(180,180,180,1);
}

.bttn:visited
{
color: #FE63BB;
}

.bttn:hover
{
/* тень, которую отбрасывает кнопка сделать больше*/ 
box-shadow:rgba(0, 0, 0, .30) 4px 4px 4px;
-moz-box-shadow:1rgba(0, 0, 0, .30) 4px 4px 4px;
-webkit-box-shadow:rgba(0, 0, 0, .30) 4px 4px 4px;
/* поменять градиент (эффект большей выпуклости)*/

background:-moz-linear-gradient(top,rgba(245,245,245,1)50%,rgba(185,185,185,1)100%);
background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(50%,rgba(245,245,245,1)),color-stop(100%,rgba(185,185,185,1)));
background:-webkit-linear-gradient(top,rgba(245,245,245,1)50%,rgba(190,190,190,1)100%);
background:-o-linear-gradient(top,rgba(245,245,245,1)50%,rgba(185,185,185,1)100%);
background:-ms-linear-gradient(top,rgba(245,245,245,1)50%,rgba(185,185,185,1)100%);
background:linear-gradient(top,rgba(245,245,245,1)50%,rgba(185,185,185,1)100%);

top: -1px;/*поднять кнопку*/
text-decoration: none;
color: #FE63BB;
}

.bttn:active,.bttn:focus{
/* тень, которую отбрасывает кнопка можно вообще убрать*/ 
box-shadow:rgba(0, 0, 0, .30) 1px 1px 1px;
-moz-box-shadow:1rgba(0, 0, 0, .30) 1px 1px 1px;
-webkit-box-shadow:rgba(0, 0, 0, .30) 1px 1px 1px;
top: 1px;/*втопить кнопку*/
/* поменять градиент для визуального 3Д*/


background:-moz-linear-gradient(top,rgba(230,230,230,1)50%,rgba(200,200,200,1)100%);
background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(50%,rgba(230,230,230,1)),
color-stop(100%,rgba(200,200,200,1)));
background:-webkit-linear-gradient(top,rgba(230,230,230,1)50%,rgba(200,200,200,1)100%);
background:-o-linear-gradient(top,rgba(230,230,230,1)50%,rgba(200,200,200,1)100%);
background:-ms-linear-gradient(top,rgba(230,230,230,1)50%,rgba(200,200,200,1)100%);
background:linear-gradient(top,rgba(230,230,230,1)50%,rgba(200,200,200,1)100%);
}

Также не забыть исправить баг Оперы.
При нажатии кнопки, она не возвращается обратно, для этого микро код JS придет на помощь и код кнопки будет:

<a href="#" class="bttn" onclick="this.blur();"><span>Кнопни мну</span></a>

В файрфоксе, опере, хроме работает на ура, ИЕ только в 10м(долбанный тормоз)

Удачного коддинга, бро!