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

  Александр Маврин   12 комментариев

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.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 разных цветов. Это красный, синий, зеленый, оранжевый, желтый, бирюзовый. Чтобы применить цвет к кнопке, пропишите к ней название цвета:

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>

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

Не стесняйтесь делиться записью в социальных сетях. Спасибо

12 комментариев
  1. Кнопки не самый шик, но G+ поставлю. 😉

  2. это все уже в бутстрапе продумано давно, только названия классов пиши и все, и красиво и кроссбраузерно 🙂

  3. http://bootstrap.veliovgroup.com

  4. Мне очень помогла ваша статья. Я давно хотела добавить две кнопочки после каждой статьи. Большое спасибо!

  5. Дмитрий:

    А как сделать спойлер с меняющейся надписью — «Открыть», «закрыть»?

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *