Оформление кнопок в CSS

Кнопки в CSS

Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.

Кнопку на веб-странице можно создать двумя способами — с помощью тега <input> и тега <button>.

Рассмотрим вначале добавление кнопки через <input>.

Синтаксис.

<input type="button" атрибуты>

Атрибуты

• name – Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
• value – Значение кнопки и одновременно надпись на ней.

Пример кнопки созданной через тэг <input>

<input type="button" name="button_1" value=" Кнопка ">

Второй способ создания кнопки основан на использовании тега <button>. Он по своему действию напоминает результат, получаемый с помощью тега <input>. Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы.

Синтаксис.

<button атрибуты>Надпись на кнопке</button>

Пример кнопки созданной через тэг <button>

<button>Кнопка с текстом</button> 
<button><img src="images/img.jpg" alt="Текст который будет показан если картинка не загрузиться" style="vertical-align:middle"> Кнопка с рисунком </button>

Кнопка с текстом
Кнопка с рисунком

В данном примере показано создание обычной кнопки с текстом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого контейнера <button>, но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования <input>, ширину кнопки изменить не удастся.

Но эти кнопки будут выглядеть некрасиво, поэтому добавляем CSS стили.

Создаем кнопку и задаем ей класс but.

<button class="but" ><span>Вход</span></button>

Вход

Приукрасим ее.

.but {
  border-radius: 4px; /*Границы закруглены*/
  background-color:  #3e8e41; /*Фон*/
  border: none; /*Границ нет*/
  color: #FFFFFF; /*Цвет текста*/
  text-align: center; /*Расположение текста*/
  font-size: 28px; /*Размер текста*/
  padding: 20px; /*Внутрение отступы*/
  width: 200px; /*Ширина*/
  transition: all 0.6s; /* Устанавливает эффект перехода между двумя состояниями элемента*/
  margin: 5px; /*Внешние отступы*/
}
.but span {
  position: relative;
  transition: 0.5s;
}

Вход

Чтобы кнопка была более живой мы используем псевдокласс :hover

:hover – Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

.but:hover span {
  padding-right: 25px;
}

Вход

Мы видим что при наведении на кнопку надпись передвигается направо, теперь добавим пару символов при помощи псевдо элемента :after

:after – псевдо элемента, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется. Псевдо элемент:after работает совместно со свойством content.

.but span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  right: -20px;
  transition: 0.5s;
}
.but:hover span:after {
  opacity: 1;
  right: 0;
}

Вход

Впрочем кнопка готова но что бы она стала еще привлекательней мы создадим эффект нажатия при помощи псевдокласса :active.

.but:active {
  background-color: #f45111;
  box-shadow: 0 5px #666;
  transform: translateY(5px);
}

transform: translateY(5px); – Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

Вход

Наша кнопка готова!!!