Кнопка с эффектом нажатия на CSS

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

Button 1Button 2
Для начала рассмотрим HTML и CSS этих кнопок

HTML

<center><a class="push_but red" href="" rel="nofollow" target="_blank">Button 1</a> 
<a class="push_but yellow" href="" rel="nofollow" target="_blank">Button 2</a></center>

Кнопка создается из ссылки путем добаления классов.
push_but это класс отвечающий за стили и анимацию кнопки;
red – стили красной кнопки;
yellow – стили желтой кнопки;

CSS

А вот и CSS стили кнопок. Их Вам нужно скопировать в css файл Вашего сайта.

/* Кнопка с нажатием*/ 

.push_but {  
  display: inline-block; 
  padding: 15px;  
  color: #fff; 
  text-decoration: none; 
  font-weight: bold; margin: 10px; 
  font-size: 20px; 
   
  border-radius: 10px; 
  -webkit-border-radius: 10px; 
  -moz-border-radius 10px; 
  box-shadow: 1px 1px 0 #ccc,  
  2px 2px 0 #c9c9c9, 
  3px 4px 0 #bbb, 

  -1px 1px 0 #ccc,  
  -2px 2px 0 #c9c9c9, 
  -3px 4px 0 #bbb;  
} 

.red {background:linear-gradient(top,#f58f99,#bf1e2e); 
  background:-webkit-linear-gradient(top,#f58f99,#bf1e2e); /* для Chrome и Safari */ 
  background:-o-linear-gradient(top,#f58f99,#bf1e2e); /* для Opera */ 
  background:-moz-linear-gradient(top,#f58f99,#bf1e2e); /* для Firefox */ 
  background:-ms-linear-gradient(top,#f58f99,#bf1e2e); /* для IE10+ */  
  color: #fff; 
  text-decoration: none;} 

.red:hover  
{ 
  background:linear-gradient(bottom,#f58f99,#bf1e2e); 
  background:-webkit-linear-gradient(bottom, #f58f99 5%,#bf1e2e); /* для Chrome и Safari */ 
  background:-o-linear-gradient(bottom,#f58f99,#bf1e2e);/* для Opera */ 
  background:-moz-linear-gradient(bottom,#f58f99,#bf1e2e); /* для Firefox */ 
  background:-ms-linear-gradient(bottom,#f58f99,#bf1e2e); /* для IE10+ */ 
  text-decoration: none;} 
   
.yellow {background:linear-gradient(top,#f4da71,#cca509); 
  background:-webkit-linear-gradient(top,#f4da71,#cca509); /* для Chrome и Safari */ 
  background:-o-linear-gradient(top,#f4da71,#cca509); /* для Opera */ 
  background:-moz-linear-gradient(top,#f4da71,#cca509); /* для Firefox */ 
  background:-ms-linear-gradient(top,#f4da71,#cca509); /* для IE10+ */  
  color: #fff; 
  text-decoration: none;} 

.yellow:hover  
{ background:linear-gradient(bottom,#f4da71,#cca509); 
  background:-webkit-linear-gradient(bottom, #f4da71 5%,#cca509); /* для Chrome и Safari  

*/ 
  background:-o-linear-gradient(bottom,#f4da71,#cca509); /* для Opera */ 
  background:-moz-linear-gradient(bottom,#f4da71,#cca509); /* для Firefox */ 
  background:-ms-linear-gradient(bottom,#f4da71,#cca509); /* для IE10+ */ 
  text-decoration: none; 
   
} 
push_but:hover { 
  text-decoration: none; 
  color: #fff; 
} 

.push_but:active { 
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1)  

inset;box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1)  

inset; 
  -moz-transform: translatey(3px); /* Для Firefox */ 
  -ms-transform: translatey(3px); /* Для IE */ 
  -webkit-transform: translatey(3px); /* Для Safari, Chrome, iOS */ 
  -o-transform:translatey(3px); /* Для Opera */ 
  transform: translatey(3px); 
}

Изменения цвета кнопки с эффектом нажатия

Хочу Вам рассказать как добавить свои цвета для этой кнокпи. Для этого в качестве примера будем создавать зеленый цвет кнопки. Итак вот шаги, которые вам нужно будет предпринять для того,чтобы создать свой цвет кнопки:

1. Скопировать полностью все классы отвечающие за цвет, например класс red. Для этого копируем .red и все его содержимое, которое в фигурных скобках { } и .red:hover со всем его содержимым фигурных скобках { }. Помещаем скопированое содержимое в блокнот в текстовый файл.
2. Первым делом нужно изменить названия классов CSS. Например, для нашего примера назовем новый класс green.
   В блокноте нажимаете Правка – Заменить (CTRL+H).

   В поле “Что:” пишите red
   В поле “Чем: – green

3. Изменяем непостредственно цвета. В блокноте копируем цвет #bf1e2e. В палитре цветов HTML выбираем нужный цвет. Я выбрала зеленый Forest Green под номером #228B22. Теперь в блокноте с помощью той же команды “Заменить” меняем цвет #bf1e2e на #228B22.
4. Теперь нужно выбрать цвет, тоже зеленый но по-светлее. YellowGreen подойдет. Опять командой заменить меняем уже #f58f99 на #9ACD32.
5. Добавляем новый стиль в css файл сайта после уже существующих. Это будет новый цвет кнопки. Вот что у меня получилось в CSS:

   .green {background:linear-gradient(top,#9ACD32,#228B22);  
     background:-webkit-linear-gradient(top,#9ACD32,#228B22); /* для Chrome и Safari */  
     background:-o-linear-gradient(top,#9ACD32,#228B22); /* для Opera */  
     background:-moz-linear-gradient(top,#9ACD32,#228B22); /* для Firefox */  
     background:-ms-linear-gradient(top,#9ACD32,#228B22); /* для IE10+ */  
     color: #fff;  
     text-decoration: none;}  
   
   .green:hover  
   {  
     background:linear-gradient(bottom,#9ACD32,#228B22);  
     background:-webkit-linear-gradient(bottom, #9ACD32 5%,#228B22); /* для Chrome и Safari */ background:-o-linear-gradient(bottom,#9ACD32,#228B22); /* для Opera */ background:-moz-linear-gradient(bottom,#9ACD32,#228B22); /* для Firefox */ background:-ms-linear-gradient(bottom,#9ACD32,#228B22); /* для IE10+ */  
     text-decoration: none;} 

6. HTML код новой кнопки теперь будет выглядеть так:

   <center><a class="push_but green" href="" rel="nofollow" target="_blank">Button 1</a></center> 

Ну а вот собственно и результат:

Button 1