Primer CSS для начинающих Button Types

10 лучших проектов для начинающих по отработке навыков HTML и 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.

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>

Выход:

монстрирует различные типы кнопок в эле

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector