Объемные CSS кнопки для сайта

18.10.2012 12 комментариев

2980

Иконка CSS Доброго времени суток, дорогие друзья. Рад приветствовать вас на своем блоге. Сегодня я расскажу вам как сделать кнопку для сайта на 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%);}

.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>

Можно сделать кнопку из 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>

Вот собственно и все. Не бойтесь экспериментировать. Главное всегда делать резервные копии файлов. Скачать кнопку для сайта можете здесь. вес всего 1 кб.
Демо СКАЧАТЬ

Любая сумма на развитие сайта

Объемные CSS кнопки для сайта

Читайте также:

Добавить комментарий Отменить ответ