Кнопки

Стили кнопок можно применять к элементам <a>, <button> или <input>.

Буквы латинского алфавита в тексте кнопок будут преобразованы в верхний регистр.

Использование

Компонент кнопки написан на чистом CSS, для его работы достаточно написать HTML-код.

Связанное чтение

Стиль

Плоская кнопка

Добавьте класс .mdui-btn к элементу <a>, <button> или <input>, чтобы получить стиль плоской кнопки.

Пример

<button class="mdui-btn">Button</button>
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">button</button>

Приподнятая кнопка

Добавление класса .mdui-btn-raised к плоской кнопке придаёт ей эффект приподнятости.

Пример

<button class="mdui-btn mdui-btn-raised">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">Button</button>

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

Добавление класса .mdui-btn-icon к плоской кнопке превращает её в кнопку с иконкой.

Пример

<button class="mdui-btn mdui-btn-icon">
  <i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>

Компактная кнопка

Компактные кнопки немного меньше обычных и подходят для сценариев, где основными способами ввода являются мышь и клавиатура. Достаточно добавить класс .mdui-btn-dense к обычной кнопке.

Пример

<button class="mdui-btn mdui-btn-dense mdui-color-theme-accent mdui-ripple">button</button>
<button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>

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

Добавьте атрибут disabled к кнопке, чтобы отключить её.

Пример

<button class="mdui-btn" disabled>disabled</button>
<button class="mdui-btn mdui-btn-raised" disabled>disabled</button>
<button class="mdui-btn mdui-btn-icon" disabled>
  <i class="mdui-icon material-icons">add</i>
</button>

Блочный элемент

Добавление класса .mdui-btn-block к кнопке растягивает её на 100% ширины родительского элемента, делая её блочным элементом (block).

Пример

<div class="mdui-row-xs-2">
  <div class="mdui-col">
    <button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
  </div>
  <div class="mdui-col">
    <button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
  </div>
</div>

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

Размещение нескольких кнопок в контейнере .mdui-btn-group превращает их в группу кнопок. Класс .mdui-btn-active на кнопке указывает на то, что она выбрана.

Пример

<div class="mdui-btn-group">
  <button type="button" class="mdui-btn">
    <i class="mdui-icon material-icons">format_align_left</i>
  </button>
  <button type="button" class="mdui-btn mdui-btn-active">
    <i class="mdui-icon material-icons">format_align_center</i>
  </button>
  <button type="button" class="mdui-btn">
    <i class="mdui-icon material-icons">format_align_right</i>
  </button>
  <button type="button" class="mdui-btn">
    <i class="mdui-icon material-icons">format_align_justify</i>
  </button>
</div>

Список CSS-классов

Имя класса	Описание
`.mdui-btn`	Определяет кнопку
`.mdui-btn-raised`	Определяет приподнятую кнопку
`.mdui-btn-icon`	Определяет кнопку с иконкой
`.mdui-btn-block`	Устанавливает кнопку как блочный элемент
`.mdui-btn-group`	Контейнер для группы кнопок
`.mdui-btn-active`	Кнопка в группе кнопок находится в выбранном состоянии

Эффект ripple

Плавающая кнопка (FAB)