CSS кнопки для сайта

Вот и появилась необходимость установить на сайте несколько кнопок. Давайте рассмотрим, как можно сделать красивые кнопки CSS для сайта. Ничего сложного в этом нет, следуйте инструкции и у вас все получится.

Кнопка № 1

Как сделать кнопку в HTML. Для того, чтобы разместить кнопку в записи, необходимо сначала создать новую запись в WordPress и перейти  в текстовый режим.

Разместите код

<a href="#" class="button">скачать</a>

# — ссылка на запись или страницу на которую перекинет кнопка.

Осталось прописать стили для этой кнопки. Для этого на хостинге вашего сайта, в файловом менеджере, потребуется открыть файл Style.css.

В самом низу, пропишите CSS код кнопки

.button1 {
  position: relative;
  display: inline-block;
  font-size: 90%;
  font-weight: 700;
  color: white;
  text-decoration: none;
  text-shadow: 0 -1px 2px rgba(0,0,0,.2);
  padding: .5em 1em;
  outline: none;
  border-radius: 3px;
 background: #7D7D7D linear-gradient(#9E9E9E, #656565) repeat scroll 0% 0%;
  box-shadow: 0px 1px rgba(255, 255, 255, 0.2) inset, 0px 3px 3px rgba(0, 1, 6, 0.5), 0px 0px 1px 1px rgba(0, 0, 0, 0.27);
}
.button1:hover:not(:active) {
 background: #7D7D7D linear-gradient(#7D7D7D, #7B7777) repeat scroll 0% 0%;
}
.button1:active {
  top: 1px;
  background: #7D7D7D linear-gradient(#6C6C6C, #575757) repeat scroll 0% 0%;
  box-shadow:
   0 0 1px rgba(0,0,0,.5) inset,
   0 2px 3px rgba(0,0,0,.5) inset,
   0 1px 1px rgba(255,255,255,.1);
}

Сохраните файл и созданную запись.

Пример созданной кнопки

Не много поясню, возможно вы сами захотите изменить цвет кнопки css, тень, цвет текста и т.д.

font-size — размер шрифта текста на кнопке;

color — цвет текста;

background — цвет фона кнопки;

border-radius — округлость кнопки;

box-shadow — тень кнопки.

Хочу также обратить ваше внимание на то, что нажатая кнопка css, немного меняется. Меняется цвет, тень и кнопка немного сдвигается вниз. За этот эффект отвечает стиль

.button1:active {
  top: 1px;
  background: #7D7D7D linear-gradient(#6C6C6C, #575757) repeat scroll 0% 0%;
  box-shadow:
   0 0 1px rgba(0,0,0,.5) inset,
   0 2px 3px rgba(0,0,0,.5) inset,
   0 1px 1px rgba(255,255,255,.1);
}

где, top — смещение кнопки вниз на 1 px;

background — цвет нажатой кнопки;

box-shadow — изменение тени.

Кнопка № 2

Css код кнопки

.button2 {position: relative;
   display: inline-block;
  width: 10em;
  height: 2.5em;
  line-height: 2.5em;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
   color: #fff;
  outline: none;
  border: 1px solid #F64C2B;
  border-radius: 6px;
  box-shadow: 0 1px rgba(255,255,255,.2) inset, 0 3px 5px rgba(0,1,6,.5), 0 0 1px 1px rgba(0,1,6,.2);
background: linear-gradient(#FF7878, #B42B2B) #C83434;
text-shadow: 0 -1px 1px #777;
font-weight: bold;}
.button2:hover {
 background: linear-gradient(#CF2929, #F07878) #FE4646;
}
.button2:active {top: .1em;
  left: .1em;
  box-shadow: 0 0 0 60px rgba(0,0,0,.05) inset;
background: linear-gradient(#56F5C8, #28C095) #30E1A9;
border: 1px solid #30E1A9;}

Html код

<a href="#" class="button2">скачать</a>

скачать

Кнопка № 3

Css код кнопки

.button3 {
position: relative;
display: inline-block;
width: 10em;
height: 2.5em;
line-height: 2.5em;
vertical-align: middle;
text-align: center;
text-decoration: none;
color: rgb(128,207,214);
outline: medium none;
border: 1px solid #4350B1;
border-radius: 5px;
box-shadow: 0px 1px rgba(255, 255, 255, 0.2) inset, 0px 3px 5px rgba(0, 1, 6, 0.5), 0px 0px 1px 1px rgba(0, 27, 164, 0.61);
background: #2959FE linear-gradient(#2D71B4, #416DD5) repeat scroll 0% 0%;
font-weight: bold;}
.button3:hover {background: #2959FE linear-gradient(#5EA4FF, #2E61DA) repeat scroll 0% 0%;}
.button3:active {top: 1px;
  background: #2959FE linear-gradient(#134BBF, #1344BA) repeat scroll 0% 0%;
  box-shadow:
   0 0 1px rgba(0,0,0,.5) inset,
   0 2px 3px rgba(0,0,0,.5) inset,
   0 1px 1px rgba(255,255,255,.1);
color: white;
}

Html код

<a href="#" class="button3">скачать</a>

скачать

В прошлой статье, мы рассматривали, как можно сделать ссылку для скачивания файла. При нажатии на ссылку в виде текста, происходило скачивание.

Данным кнопкам тоже можно прописать такое правило. В Html коде добавьте download.

 

Кнопки для сайта cssВместо URL, вставьте ссылку на скачиваемый файл.

Теперь при нажатии на кнопку, будет происходить скачивание.

Если возникли вопросы, можете написать в комментариях.

 

[Всего голосов: 1    Средний: 5/5]

Комментарии:

4 комментария на «“CSS кнопки для сайта”»

  1. Из любопытства перешел посмотрел, действительно классный блог. Очень познавательная статья которая заставляет задуматься и понять.

  2. Интересная идея, спасибо. Только у меня что-то не то получилось. Кнопка появляется только после наведения курсора на надпись «Скачать». В чём может быть проблема.

    • Если вы следовали инструкции, то проблем возникнуть не должно. Попробуйте почистить кэш.

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

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

© 2017 Онлайн журнал - Blognovichok.ru· Авторские права защищены.
Все материалы опубликованные на сайте являются объектами авторского права. Использование материалов разрешается только с активной ссылкой на blognovichok.ru