Кнопки CSS для начинающих Типы кнопок
Primer CSS — это бесплатная среда CSS с открытым исходным кодом, построенная на системах, создающих основу для основных элементов стиля, таких как интервалы, типографика и цвет. Этот систематический метод гарантирует, что наши шаблоны стабильны и взаимодействуют друг с другом. Его подход к CSS находится под влиянием принципов объектно-ориентированного CSS, функционального CSS и архитектуры БЭМ. Он очень многоразовый и гибкий.
Кнопки помогают нам инициировать действие, такое как отправка формы, переход к другой ссылке и т. д. Чтобы создать кнопку в Primer CSS, мы используем класс .btn в теге <button> или <a>.
В этой статье мы узнаем обо всех типах кнопок, доступных в Primer CSS.
Primer CSS предоставляет нам различные типы кнопок для разных сценариев. Типы кнопок можно добавить к элементу <button> с помощью предопределенных классов. В Primer CSS есть 4 типа кнопок.
Классы типов кнопок:
- btn: класс btn используется для создания базовой кнопки по умолчанию.
- btn-primary: класс btn-primary создает зеленую кнопку, показывающую успех события.
- btn-outline: класс btn-outline создает кнопку с контуром вместо фоновой заливки.
- btn-danger: класс btn-danger создает красную кнопку, которая показывает ошибку или сбой события.
Синтаксис:
<button class="btn btn-primary">....</button>
Пример 1: Это демонстрирует различные типы кнопок в элементе <button> в Primer CSS.
Выход:
Пример 2. Это демонстрирует различные типы кнопок в элементе <a> в Primer CSS .
Выход:
Ссылка: https://primer.style/css/components/buttons#button-types