Блог

css Создаем компонент для кнопок
16 марта 2024 г.

Создаем компонент для кнопок

css

Размеры

large - большая
middle - средняя
small - маленькая

Цвета

primary secondary tertiary success danger

Модификации

outline - обводка и фон
transparent - текстовая кнопка
pressed - активная кнопка
loading - загрузка
full - на весь контейнер
disabled - отключенный

Состояния

hover и active задается в соответствии выбранному цвету кнопки.

Вызов

Инициализация кнопки начинается с класса button, далее накидываем размер, цвет и модификацию.
.button.large.primary - первая кнопка в примере ниже.

Демонстрация