Страницы Интернета

Доброго времени суток, дорогие друзья. Рад приветствовать вас на своем блоге. Сегодня я расскажу вам как сделать кнопку для сайта на CSS с красивым эффектом нажатия, наведения  и градиента. Эти эффекты будут реализованы средствами  CSS3. И сейчас разберем момент, как установить кнопку на сайт. Первое, что нужно сделать, это определить стили кнопки. Нужно открыть на редактирование файл style.css и внести в него этот код:

.button{color:#fff;padding: 8px 14px 10px;background-color:#bc1815; 
border:none;margin-right:25px;position:relative;webkit-user-select:none;
-webkit-box-shadow:inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow:inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
box-shadow:inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;
-webkit-text-shadow:1px 1px 0px rgba(0, 0, 0, 0.5);
-moz-text-shadow:1px 1px 0px rgba(0, 0, 0, 0.5);
text-shadow:1px 1px 0px rgba(0, 0, 0, 0.5);}
.button:active { position:relative;top:3px;
-webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
-moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);}
.button:active:after { content: ""; width: 100%; height: 3px; background: #fff; position: absolute; bottom: -1px; left: 0; }
.button.blue { background: #22C3EB; }
.button.green { background: #67b600; }
.button.orange { background: #da8a00; }
.button.yellow { background: #b3a400; }
.button.turquoise { background: #00b1af; }
.button:last-of-type { margin: 0; }
.button.gradient {background-image: -webkit-gradient(
linear,left bottom,left top,color-stop(0.1, rgba(0,0,0,0.3)),color-stop(1, rgba(255,255,255,0.2)));
background-image: -moz-linear-gradient(
center bottom,rgba(0,0,0,0.3) 1%,rgba(255,255,255,0.2) 100%);
background-image: gradient(center bottom,rgba(0,0,0,0.3) 1%,rgba(255,255,255,0.2) 100%);}
.button.gradient:hover {
background-image: -webkit-gradient(linear,left bottom,
left top,color-stop(0.1, rgba(0,0,0,0.45)),color-stop(1, rgba(255,255,255,0.3)));background-image: -moz-linear-gradient(center bottom,
rgba(0,0,0,0.45) 1%,rgba(255,255,255,0.3) 100%);background-image: gradient(center bottom,rgba(0,0,0,0.45) 1%,
rgba(255,255,255,0.3) 100%);}

<a href="#" class="button gradient">Кнопка</a>

1
2
3
4
5
6

<a href="#" class="button gradient">Нажать</a>
<a href="#" class="button blue gradient">Кнопка</a>
<a href="#" class="button green gradient">Кнопка</a>
<a href="#" class="button orange gradient">Кнопка</a>
<a href="#" class="button yellow gradient">Кнопка</a>
<a href="#" class="button turquoise gradient">Кнопка</a>