Эффект нажатия кнопки на CSS (без изображений)

Всем привет! Всех поздравляю с Днем солидарности трудящихся. Помните: нужно работать каждый день, чтобы хоть чего-то добиться! Это я вам и желаю.

Теперь к блогу вернемся. Вчера посмотрел список самых популярных материалов на сайте и был поражен: Лучшие CSS эффекты при наведении курсора на изображение  занимают лидирующую позицию по популярности в течении двух месяцев. Что ж, если "пипл хавает" нужно им поддаться.

Сегодня я рад вам представить новый материал на тему CSS - эффектов. Ничего сложного в данном эффекте нету, напротив всё очень понятно и доходчиво.

 Смотреть демо "Эффект нажатия кнопки на CSS"

Наверняка, Вы видели такой эффект на сайте ВКонакте, но как реализовать этот визуальный трюк на своем сайте. Как оказалось, всё достаточно просто:  мы будем отталкиваться от  :hover и :active, а также от свойства бэкграунда -gradient.  Для примера я выбрал два цвета: синий и желтый (хотя, он больше оранжевый напоминает)

HTML

<a class="blue-button" href="#">Синяя кнопка</a>

CSS

.blue-button {
display:block;
width: 200px;
height: 23px;
padding: 21px 0;
background: -moz-linear-gradient(top, #057cc0, #249ee4);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#057cc0), to(#249ee4));
border-radius:10px;
margin-bottom: 2em;
margin-right: 2em;
float: left;
text-align:center; } 

.blue-button:hover{
background: -moz-linear-gradient(top, #249ee4, #057cc0);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#249ee4), to(#057cc0));}
 
.blue-button:active {
background: -moz-linear-gradient(top, #057cc0, #249ee4);
background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#057cc0), to(#249ee4));
padding-top: 22px; } 

HTML

 <a class="yellow-button" href="#">Желтая кнопка</a>

CSS

.yellow-button {
display:block;
width: 200px;
height: 23px;
padding: 21px 0;
background: -moz-linear-gradient(center top , #f9c037, #f8a13b);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, 
from(#F9C037), to(#F8A13B));
margin-bottom: 2em;
border-radius:10px;
float: left;
text-align:center; }
 
.yellow-button:hover {
background: -moz-linear-gradient(center top , #f8a13b, #f9c037);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8a13b), to(#f9c037));}
 
.yellow-button:active {
background: -moz-linear-gradient(center top , #f9c037, #f8a13b);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F9C037), to(#F8A13B));
padding-top: 22px;}

 Смотреть демо "Эффект нажатия кнопки на CSS"

Ваши вопросы, как всегда жду в комментариях. Всем мирного неба над головой. До встречи ;)