Кнопки

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

        
<button type="button" class="btn btn-primary btn-lg mb-1">
  Large button
</button>
<button type="button" class="btn btn-primary mb-1">
  Base button
</button>
<button type="button" class="btn btn-primary btn-sm mb-1">
  Small button
</button>
<button type="button" class="btn btn-primary btn-xs mb-1">
  Extra Small button
</button>

В цвет темы дизайна

Ahead only

Класс Default позволяет создавать кнопки с цветом выбранным в настройках темы дизайна.

        
<button class="btn btn-default mb-1">
  Default soft
</button>
<button class="btn btn-default-soft mb-1">
  Default soft
</button>
<button class="btn btn-default btn-pill mb-1">
  Default pill
</button>

Полупрозрачные

Ahead only

Класс Soft позволяет создавать кнопки с полупрозрачным фоновым цветом.


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

Закругленные

Ahead only

Создает округлую вариацию компонента кнопки.


        <button class="btn btn-primary btn-pill btn-lg">
  Button pill
</button>

<button class="btn btn-success btn-pill">
  Button pill
</button>

<button class="btn btn-danger btn-pill btn-sm">
  Button pill
</button>

Круглые кнопки

Ahead only

Используйте класс .btn-rounded-cirle для создания круглой кнопки.

        
<button class="btn btn-primary btn-rounded-circle btn-lg mb-1">
  <i class="icon icon-xxs">
    {call include_icon icon="feather/check"}
  </i>
</button>
<button class="btn btn-success-soft btn-rounded-circle mb-1">
  <i class="icon icon-xxxs">
    {call include_icon icon="feather/check"}
  </i>
</button>
<button class="btn btn-danger-soft btn-rounded-circle btn-sm mb-1">
  <i class="icon icon-xxxxs">
    {call include_icon icon="feather/check"}
  </i>
</button>

Начало работы

Компоненты

Иконки

Готовые блоки

Готовые страницы

Плагины и приложения

JS Плагины

Дополнительные и глобальные параметры

Остальное

Кнопки

В цвет темы дизайна

Полупрозрачные

Закругленные

Круглые кнопки

Перейти