Кнопки помогают нам инициировать действие, такое как отправка формы, переход к другой ссылке и т. д. Чтобы создать кнопку в 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.
HTML
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Primer CSS</
title
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
href
=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
rel
=
"stylesheet"
/>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
strong
>Primer CSS Button Types</
strong
>
<
br
>
<
button
class
=
"btn"
type
=
"button"
>Default</
button
>
<
button
class
=
"btn btn-primary"
type
=
"button"
>Primary</
button
>
<
button
class
=
"btn btn-outline"
type
=
"button"
>Outline</
button
>
<
button
class
=
"btn btn-danger"
type
=
"button"
>Danger</
button
>
</
center
>
</
body
>
</
html
>
Выход:
Пример 2: Это демонстрирует различные типы кнопок в элементе <a> в Primer CSS.
HTML
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Primer CSS</
title
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
href
=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
rel
=
"stylesheet"
/>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
strong
>Primer CSS Button Types</
strong
>
<
br
><
br
>
<
a
class
=
"btn"
type
=
"button"
>Default anchor button</
a
>
<
a
class
=
"btn btn-primary"
type
=
"button"
>Primary anchor button</
a
>
<
a
class
=
"btn btn-outline"
type
=
"button"
>Outline anchor button</
a
>
<
a
class
=
"btn btn-danger"
type
=
"button"
>Danger anchor button</
a
>
</
center
>
</
body
>
</
html
>
Выход: