Кнопки
button
sm
md
lg
xl
В SIMAI Framework с помощью модификаторов можно создать кнопки.
Описание
Кнопки – одни из самых распространенных компонентов, которые позволяют организовать взаимодействие пользователя с интерфейсом сайта.
Структура
Для оформления кнопок вы можете использовать тег кнопок - button или ссылок - button.
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse">
Кнопка
</button>
<a href="#" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse">
Ссылка
</a>Модификаторы
С помощью модификаторов вы можете в широких пределах изменять отображение и поведение кнопок.
Цвет кнопок
В рамках SIMAI Framework, вы можете использовать базовые цвета, цвета темы и произвольное цветовое оформление.
Базовые цвета
Используйте базовую палитру цветов для кнопок:
bg-gray-5b-gray-5color-on-surface-inversehover:bg-surface-inversehover:b-gray-6hover:c-white– цвет по умолчаниюbg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3– основной цвет сайтаbg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse– дополнительный цвет сайта.bg-success border-success color-on-surface-inverse color-on-surface-inverse hover:bg-success-container– цвет успеха.bg-primary-container border-info color-on-surface-inverse hover:bg-primary– цвет информирования.bg-warning border-warning color-on-surface-inverse hover:bg-warning-container– цвет предупреждения.bg-danger border-danger color-on-surface-inverse hover:bg-error-container– цвет опасности.btn-link– без цвета - в виде ссылки
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3">
Главный
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse">
Вторичный
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-success border-success color-on-surface-inverse color-on-surface-inverse hover:bg-success-container">
Успех
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-primary-container border-info color-on-surface-inverse hover:bg-primary">
Информация
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-warning border-warning color-on-surface-inverse hover:bg-warning-container">
Предупреждение
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-danger border-danger color-on-surface-inverse hover:bg-error-container">
Опасность
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal btn-link">
Ссылка
</button>Цвета темы
Тематические кнопки адаптируются под цвет фона в рамках заданной ветовой схемы (светлой или темной). Подробнее темах вы можете узнать в данном разделе.
<section class="theme-light bg-surface-0 w-1/2 p-1 center">
<button href="#" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal btn-theme wave">
Тема
</button>
<button href="#" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal btn-theme-inverse wave">
Противоположная
</button>
</section>
<section class="theme-dark bg-surface-0 w-1/2 p-1 center">
<button href="#" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal btn-theme">
Тема
</button>
<button href="#" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal btn-theme-inverse">
Противоположная
</button>
</section>Произвольные цвета
Используйте модификаторы цвета для задания цвета фона, текста и границы кнопки, чтобы сделать кнопку произвольного вида.
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-pink color-on-surface-inverse">
Розовая
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-fb color-on-surface-inverse">
Facebook
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-g1 color-on-surface-inverse">
SIMAI
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-surface-1 color-on-surface wave">
Светлая
</button>Размер кнопок
Адаптивный модификатор. Позволяет изменять размер кнопки. Использование: .{контрольная точка}:btn-{размер}
- Контрольная точка. Необязательный параметр. Изменяет размер кнопки только для определенного диапазона, в соответствии с контрольными точками (sm, md, lg, xl).
- Размер. Обязательный параметр. Указывает размер кнопки. Принимает значения:
-2– маленькие кнопки (75% от базового размера)-1– уменьшенные кнопки (87,5% от базового размера)0– базовый размер (по умолчанию)1– увеличенные кнопки (125% от базового размера)2– большие кнопки (150% от базового размера)
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse">
Очень маленькая
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse">
Маленькая
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse">
Стандартная
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse">
Большая
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse">
Очень Большая
</button>Пример использования в адаптивном режиме:
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse md:btn-1 xl:btn-2">
Кнопка
</button>Стили кнопок
Вы можете использовать следующие модификаторы для задания стиля кнопок:
.radius-0– прямоугольные кнопки.radius-full– закругленные кнопки.btn-outline– контурные кнопкиuppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal– кнопки в стиле Material Designuppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal– кнопки в стиле Flat Material Design
Прямоугольные кнопки
Используйте класс .radius-0, чтобы убрать закругление углов кнопки.
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse radius-0">
По умолчанию
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 radius-0">
Главный
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse radius-0">
Вторичный
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-success border-success color-on-surface-inverse color-on-surface-inverse hover:bg-success-container radius-0">
Успех
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-primary-container border-info color-on-surface-inverse hover:bg-primary radius-0">
Информация
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-warning border-warning color-on-surface-inverse hover:bg-warning-container radius-0">
Предупреждение
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-danger border-danger color-on-surface-inverse hover:bg-error-container radius-0">
Опасность
</button>Кнопки материального дизайна
Используйте модификаторы uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal чтобы сделать кнопки в стиле материального дизайна.
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal">
По умолчанию
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal">
Главный
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal">
Вторичный
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-success border-success color-on-surface-inverse color-on-surface-inverse hover:bg-success-container uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal">
Успех
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-primary-container border-info color-on-surface-inverse hover:bg-primary uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal">
Информация
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-warning border-warning color-on-surface-inverse hover:bg-warning-container uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal">
Предупреждение
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-danger border-danger color-on-surface-inverse hover:bg-error-container uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal">
Опасность
</button>Плоские кнопки материального дизайна
Используйте класс .uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal, чтобы сделать кнопки в стиле материального дизайна.
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal">
По умолчанию
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal">
Главный
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal">
Вторичный
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-success border-success color-on-surface-inverse color-on-surface-inverse hover:bg-success-container uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal">
Успех
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-primary-container border-info color-on-surface-inverse hover:bg-primary uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal">
Информация
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-warning border-warning color-on-surface-inverse hover:bg-warning-container uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal">
Предупреждение
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-danger border-danger color-on-surface-inverse hover:bg-error-container uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal">
Опасность
</button>Закругленные кнопки
Используйте класс .radius-full, чтобы сделать кнопки с скругленными краями.
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse radius-full">
По умолчанию
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 radius-full">
Главный
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse radius-full">
Вторичный
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-success border-success color-on-surface-inverse color-on-surface-inverse hover:bg-success-container radius-full">
Успех
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-primary-container border-info color-on-surface-inverse hover:bg-primary radius-full">
Информация
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-warning border-warning color-on-surface-inverse hover:bg-warning-container radius-full">
Предупреждение
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-danger border-danger color-on-surface-inverse hover:bg-error-container radius-full">
Опасность
</button>Закругленные кнопки материального дизайна
Сочетайте модификаторы uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal и .radius-full, чтобы сделать закругленные кнопки в стиле материального дизайна.
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal radius-full">
Главный
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal radius-full">
По умолчанию
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal radius-full">
Вторичный
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-success border-success color-on-surface-inverse color-on-surface-inverse hover:bg-success-container uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal radius-full">
Успех
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-primary-container border-info color-on-surface-inverse hover:bg-primary uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal radius-full">
Информация
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-warning border-warning color-on-surface-inverse hover:bg-warning-container uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal radius-full">
Предупреждение
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-danger border-danger color-on-surface-inverse hover:bg-error-container uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal radius-full">
Опасность
</button>Контурные кнопки
Используйте класс .btn-outline, чтобы сделать кнопку контурной.
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse btn-outline">
По умолчанию
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 btn-outline">
Главный
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse btn-outline">
Вторичный
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-success border-success color-on-surface-inverse color-on-surface-inverse hover:bg-success-container btn-outline">
Успех
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-primary-container border-info color-on-surface-inverse hover:bg-primary btn-outline">
Информация
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-warning border-warning color-on-surface-inverse hover:bg-warning-container btn-outline">
Предупреждение
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-danger border-danger color-on-surface-inverse hover:bg-error-container btn-outline">
Опасность
</button>Прямоугольные контурные кнопки
Сочетайте классы .radius-0 и btn-outline, чтобы сделать прямоугольные контурные кнопки.
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse radius-0 btn-outline">
По умолчанию
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 radius-0 btn-outline">
Главный
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse radius-0 btn-outline">
Вторичный
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-success border-success color-on-surface-inverse color-on-surface-inverse hover:bg-success-container radius-0 btn-outline">
Успех
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-primary-container border-info color-on-surface-inverse hover:bg-primary radius-0 btn-outline">
Информация
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-warning border-warning color-on-surface-inverse hover:bg-warning-container radius-0 btn-outline">
Предупреждение
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-danger border-danger color-on-surface-inverse hover:bg-error-container radius-0 btn-outline">
Опасность
</button>Закругленные контурные кнопки
Сочетайте классы .radius-full и .btn-outline, чтобы сделать прямоугольные контурные кнопки.
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse btn-outline radius-full waves-effect">
По умолчанию
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 btn-outline radius-full waves-effect">
Главный
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse btn-outline radius-full waves-effect">
Вторичный
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-success border-success color-on-surface-inverse color-on-surface-inverse hover:bg-success-container btn-outline radius-full waves-effect">
Успех
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-primary-container border-info color-on-surface-inverse hover:bg-primary btn-outline radius-full waves-effect">
Информация
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-warning border-warning color-on-surface-inverse hover:bg-warning-container btn-outline radius-full waves-effect">
Предупреждение
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-danger border-danger color-on-surface-inverse hover:bg-error-container btn-outline radius-full waves-effect">
Опасность
</button>Прозрачне кнопки
Используйте класс .uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal, чтобы сделать кнопку с прозрачным фоном.
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal waves-effect">
По умолчанию
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal waves-effect">
Главный
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal waves-effect">
Вторичный
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer bg-success border-success color-on-surface-inverse color-on-surface-inverse hover:bg-success-container uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal waves-effect">
Успех
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer bg-primary-container border-info color-on-surface-inverse hover:bg-primary uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal waves-effect">
Информация
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer bg-warning border-warning color-on-surface-inverse hover:bg-warning-container uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal waves-effect">
Предупреждение
</button>
<button class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer bg-danger border-danger color-on-surface-inverse hover:bg-error-container uppercase radius-0 p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 f-1/2 border-0 weight-5 string-normal waves-effect">
Опасность
</button>Кнопки - иконки
Используйте класс .btn-icon и шрифтовые иконки, чтобы сделать кнопки-иконки.
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse btn-icon">
<i class="fa fa-check" aria-hidden="true"></i>
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 btn-icon">
<i class="fa fa-cog" aria-hidden="true"></i></button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse btn-icon">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-success border-success color-on-surface-inverse color-on-surface-inverse hover:bg-success-container btn-icon">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-primary-container border-info color-on-surface-inverse hover:bg-primary btn-icon">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-warning border-warning color-on-surface-inverse hover:bg-warning-container btn-icon">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-danger border-danger color-on-surface-inverse hover:bg-error-container btn-icon">
<i class="fa fa-phone" aria-hidden="true"></i>
</button>Кнопки с иконкой
Используйте класс .btn-labeled, чтобы сделать кнопку с дополнительной иконкой. Иконка размещается в обертке <span class="btn-label">{иконка}</span>.
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal btn-labeled bg-success border-success color-on-surface-inverse color-on-surface-inverse hover:bg-success-container">
<span class="btn-label">
<i class="fa fa-check"></i>
</span>
Успех
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal btn-labeled bg-danger border-danger color-on-surface-inverse hover:bg-error-container">
<span class="btn-label">
<i class="fa fa-times"></i>
</span>
Опасность
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal btn-labeled bg-primary-container border-info color-on-surface-inverse hover:bg-primary">
<span class="btn-label">
<i class="fa fa-exclamation"></i>
</span>
Информация
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal btn-labeled bg-warning border-warning color-on-surface-inverse hover:bg-warning-container">
<span class="btn-label">
<i class="fa fa-warning"></i>
</span>
Предупреждение
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal btn-outline btn-labeled bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse">
<span class="btn-label">
<i class="fa fa-arrow-left"></i>
</span>
Слева
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal btn-outline btn-labeled bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:color-on-surface-inverse">
Справа
<span class="btn-label btn-label-right">
<i class="fa fa-arrow-right"></i>
</span>
</button>Кнопки на всю ширину блока
Используйте класс .btn-block, чтобы сделать кнопку на всю ширину блока.
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 lg:btn btn-block">
Кнопка блочного уровня
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse lg:btn btn-block">
Кнопка блочного уровня
</button>Группа кнопок
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3">
Слева
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3">
По середине
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3">
Справа
</button>
</div>Активное состояние
<a href="#" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 lg:btn active" role="button" aria-pressed="true">
Главная ссылка
</a>
<a href="#" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse lg:btn active" role="button" aria-pressed="true">
Ссылка
</a>Отключенное состояние
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal lg:btn bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3" disabled>
Главная кнопка
</button>
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse lg:btn" disabled>
Кнопка
</button>
<a href="#" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 lg:btn disabled" role="button" aria-disabled="true">
Главная ссылка
</a>
<a href="#" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:color-on-surface-inverse lg:btn disabled" role="button" aria-disabled="true">
Ссылка
</a>Кнопка - переключатель
<button type="button" class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 btn-outline" data-toggle="button" aria-pressed="false" autocomplete="off">
Одиночный переключатель
</button>Группа кнопок - выключателей
<div class="btn-group" data-toggle="buttons">
<label class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 active btn-outline">
<input type="checkbox" checked autocomplete="off">
Checkbox 1 (pre-checked)
</label>
<label class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 btn-outline">
<input type="checkbox" autocomplete="off">
Checkbox 2
</label>
<label class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 btn-outline">
<input type="checkbox" autocomplete="off">
Checkbox 3
</label>
</div>Группа кнопка - переключателей
<div class="btn-group" data-toggle="buttons">
<label class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 active btn-outline">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
Радио 1 (preselected)
</label>
<label class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 btn-outline">
<input type="radio" name="options" id="option2" autocomplete="off">
Радио 2
</label>
<label class="relative inline-block weight-4 center wrap-none textext-middle border-1 radius-1/3 border-transparent transition-all-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 string-normal bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3 btn-outline">
<input type="radio" name="options" id="option3" autocomplete="off">
Радио 3
</label>
</div>Адаптивность
Для установки адаптивности кнопок, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.