Кнопки

Кнопки – одни из самых распространенных компонентов, которые позволяют организовать взаимодействие пользователя с интерфейсом сайта.

Структура

Для оформления кнопок вы можете использовать тег кнопок - button или ссылок - button. Кнопки обозначаются классом .btn.

Link
<button type="button" class="btn btn-default">Button</button>
<a href="#" class="btn btn-default">Link</a>

Модификаторы

С помощью модификаторов вы можете в широких пределах изменять отображение и поведение кнопок. Порядок использования модификаторов: .btn {цвет} {размер} {стиль} {состояние} {эффекты}

Цвет кнопок

В рамках SIMAI Framework, вы можете использовать базовые цвета, цвета темы и произвольное цветовое оформление.

Базовые цвета

Используйте базовую палитру цветов для кнопок:

  • .btn-default – цвет по умолчанию
  • .btn-primary – основной цвет сайта
  • .btn-secondary – дополнительный цвет сайта
  • .btn-success – цвет успеха
  • .btn-info – цвет информирования
  • .btn-warning – цвет предупреждения
  • .btn-danger – цвет опасности
  • .btn-link – без цвета - в виде ссылки
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Цвета темы

Тематические кнопки адаптируются под цвет фона в рамках заданной цветовой схемы (светлой или темной). Подробнее темах вы можете узнать в данном разделе.

<section class="theme-light w-50 float-left p-4 t-center">
<button href="#" class="btn btn-theme wave">Theme</button>
<button href="#" class="btn btn-theme-inverse wave">Inverse</button>
</section>
<section class="theme-dark w-50 float-left p-4 t-center">
<button href="#" class="btn btn-theme">Theme</button>
<button href="#" class="btn btn-theme-inverse">Inverse</button>
</section>

Произвольные цвета

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

<button type="button" class="btn bg-pink c-white">Pink</button>
<button type="button" class="btn bg-fb c-white">Facebook</button>
<button type="button" class="btn bg-g1 c-white">SIMAI</button>
<button type="button" class="btn bg-gray-50 c-gray-800 wave">Light</button>

Размер кнопок

Адаптивный модификатор. Позволяет изменять размер кнопки. Использование: .btn{контрольная точка}-{размер}

  • Контрольная точка. Необязательный параметр. Изменяет размер кнопки только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Размер. Обязательный параметр. Указывает размер кнопки. Принимает значения:
    • -2 – маленькие кнопки (75% от базового размера)
    • -1 – уменьшенные кнопки (87,5% от базового размера)
    • 0 – базовый размер (по умолчанию)
    • 1 – увеличенные кнопки (125% от базового размера)
    • 2 – большие кнопки (150% от базового размера)
<button type="button" class="btn btn-default btn--2">Extra Small</button>
<button type="button" class="btn btn-default btn--1">Small</button>
<button type="button" class="btn btn-default btn-0">Normal</button>
<button type="button" class="btn btn-default btn-1">Large</button>
<button type="button" class="btn btn-default btn-2">Extra Large</button>

Пример использования в адаптивном режиме:

<button type="button" class="btn btn-default btn-0 btn-md-1 btn-xl-2">Button</button>

Стили кнопок

Вы можете использовать следующие модификаторы для задания стиля кнопок:

  • .btn-square – прямоугольные кнопки
  • .btn-rounded – закругленные кнопки
  • .btn-outline – контурные кнопки
  • .btn-md – кнопки в стиле Material Design
  • .btn-flat – кнопки в стиле Flat Material Design

Прямоугольные кнопки

Используйте класс .btn-square, чтобы убрать закругление углов кнопки.

<button type="button" class="btn btn-default btn-square">Default</button>
<button type="button" class="btn btn-primary btn-square">Primary</button>
<button type="button" class="btn btn-secondary btn-square">Secondary</button>
<button type="button" class="btn btn-success btn-square">Success</button>
<button type="button" class="btn btn-info btn-square">Info</button>
<button type="button" class="btn btn-warning btn-square">Warning</button>
<button type="button" class="btn btn-danger btn-square">Danger</button>

Кнопки материального дизайна

Используйте класс .btn-md чтобы сделать кнопки в стиле материального дизайна.

<button type="button" class="btn btn-default btn-md">Default</button>
<button type="button" class="btn btn-primary btn-md">Primary</button>
<button type="button" class="btn btn-secondary btn-md">Secondary</button>
<button type="button" class="btn btn-success btn-md">Success</button>
<button type="button" class="btn btn-info btn-md">Info</button>
<button type="button" class="btn btn-warning btn-md">Warning</button>
<button type="button" class="btn btn-danger btn-md">Danger</button>

Плоские кнопки материального дизайна

Используйте класс .btn-flat, чтобы сделать кнопки в стиле материального дизайна.

<button type="button" class="btn btn-default btn-md">Default</button>
<button type="button" class="btn btn-primary btn-md">Primary</button>
<button type="button" class="btn btn-secondary btn-md">Secondary</button>
<button type="button" class="btn btn-success btn-md">Success</button>
<button type="button" class="btn btn-info btn-md">Info</button>
<button type="button" class="btn btn-warning btn-md">Warning</button>
<button type="button" class="btn btn-danger btn-md">Danger</button>

Закругленные кнопки

Используйте класс .btn-rounded, чтобы сделать кнопки с скругленными краями.

<button class="btn btn-default btn-rounded">Default</button>
<button class="btn btn-primary btn-rounded">Primary</button>
<button class="btn btn-secondary btn-rounded">Secondary</button>
<button class="btn btn-success btn-rounded">Success</button>
<button class="btn btn-info btn-rounded">Info</button>
<button class="btn btn-warning btn-rounded">Warning</button>
<button class="btn btn-danger btn-rounded">Danger</button>

Закругленные кнопки материального дизайна

Сочетайте классы .btn-md и .btn-rounded, чтобы сделать закругленные кнопки в стиле материального дизайна.

<button class="btn btn-primary  btn-md btn-rounded">Primary</button>
<button class="btn btn-default btn-md btn-rounded">Default</button>
<button class="btn btn-secondary btn-md btn-rounded">Secondary</button>
<button class="btn btn-success btn-md btn-rounded">Success</button>
<button class="btn btn-info btn-md btn-rounded">Info</button>
<button class="btn btn-warning btn-md btn-rounded">Warning</button>
<button class="btn btn-danger btn-md btn-rounded">Danger</button>

Контурные кнопки

Используйте класс .btn-outline, чтобы сделать кнопку контурной.

<button type="button" class="btn btn-default btn-outline">Default</button>	
<button type="button" class="btn btn-primary btn-outline">Primary</button>
<button type="button" class="btn btn-secondary btn-outline">Secondary</button>
<button type="button" class="btn btn-success btn-outline">Success</button>
<button type="button" class="btn btn-info btn-outline">Info</button>
<button type="button" class="btn btn-warning btn-outline">Warning</button>
<button type="button" class="btn btn-danger btn-outline">Danger</button>

Прямоугольные контурные кнопки

Сочетайте классы .btn-square и .btn-outline, чтобы сделать прямоугольные контурные кнопки.

<button type="button" class="btn btn-default btn-square btn-outline">Default</button>
<button type="button" class="btn btn-primary btn-square btn-outline">Primary</button>
<button type="button" class="btn btn-secondary btn-square btn-outline">Secondary</button>
<button type="button" class="btn btn-success btn-square btn-outline">Success</button>
<button type="button" class="btn btn-info btn-square btn-outline">Info</button>
<button type="button" class="btn btn-warning btn-square btn-outline">Warning</button>
<button type="button" class="btn btn-danger btn-square btn-outline">Danger</button>

Закругленные контурные кнопки

Сочетайте классы .btn-rounded и .btn-outline, чтобы сделать прямоугольные контурные кнопки.

<button class="btn btn-default btn-outline btn-rounded  waves-effect">Default</button>
<button class="btn btn-primary btn-outline btn-rounded waves-effect">Primary</button>
<button class="btn btn-secondary btn-outline btn-rounded waves-effect">Secondary</button>
<button class="btn btn-success btn-outline btn-rounded waves-effect">Success</button>
<button class="btn btn-info btn-outline btn-rounded waves-effect">Info</button>
<button class="btn btn-warning btn-outline btn-rounded waves-effect">Warning</button>
<button class="btn btn-danger btn-outline btn-rounded waves-effect">Danger</button>

Прозрачне кнопки

Используйте класс .btn-flat, чтобы сделать кнопку с прозрачным фоном.

<button class="btn btn-default btn-flat waves-effect">Default</button>
<button class="btn btn-primary btn-flat waves-effect">Primary</button>
<button class="btn btn-secondary btn-flat waves-effect">Secondary</button>
<button class="btn btn-success btn-flat waves-effect">Success</button>
<button class="btn btn-info btn-flat waves-effect">Info</button>
<button class="btn btn-warning btn-flat waves-effect">Warning</button>
<button class="btn btn-danger btn-flat waves-effect">Danger</button>

Кнопки - иконки

Используйте класс .btn-icon и шрифтовые иконки, чтобы сделать кнопки-иконки.

<button type="button" class="btn btn-default btn-icon"><i class="fa fa-check" aria-hidden="true"></i></button>	
<button type="button" class="btn btn-primary btn-icon"><i class="fa fa-cog" aria-hidden="true"></i></button>
<button type="button" class="btn btn-secondary btn-icon"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-success btn-icon"><i class="fa fa-shopping-cart" aria-hidden="true"></i></button>
<button type="button" class="btn btn-info btn-icon"><i class="fa fa-bars" aria-hidden="true"></i></button>
<button type="button" class="btn btn-warning btn-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></button>
<button type="button" class="btn btn-danger btn-icon"><i class="fa fa-phone" aria-hidden="true"></i></button>

Кнопки с иконкой

Используйте класс .btn-labeled, чтобы сделать кнопку с дополнительной иконкой. Иконка размещается в обертке <span class="btn-label">{иконка}</span>.

<button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="fa fa-check"></i></span>Success</button>
<button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i class="fa fa-times"></i></span>Danger</button>
<button type="button" class="btn btn-labeled btn-info"><span class="btn-label"><i class="fa fa-exclamation"></i></span>Info</button>
<button type="button" class="btn btn-labeled btn-warning"><span class="btn-label"><i class="fa fa-warning"></i></span>Warning</button>
<button type="button" class="btn btn-outline btn-labeled btn-default"><span class="btn-label"><i class="fa fa-arrow-left"></i></span>Left</button>
<button type="button" class="btn btn-outline btn-labeled btn-default">Right<span class="btn-label btn-label-right"><i class="fa fa-arrow-right"></i></span></button>

Кнопки на всю ширину блока

Используйте класс .btn-block, чтобы сделать кнопку на всю ширину блока.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Группа кнопок

<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>

Активное состояние

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Отключенное состояние

Primary link Link
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Кнопка - переключатель

<button type="button" class="btn btn-primary btn-outline" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>

Группа кнопка - выключателей

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active btn-outline">
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary btn-outline">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary btn-outline">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>

Группа кнопка - переключателей

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active btn-outline">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary btn-outline">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary btn-outline">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>