Кнопки

Простой CSS для кнопок.

Стандартные кнопки

Для создания стандартной кнопки добавьте класс pure-button к тегу <a> или <button>.

Кнопка Pure
<a class="pure-button" href="#">Кнопка Pure</a>
<button class="pure-button">Кнопка Pure</button>

Заблокированные кнопки

Чтобы заблокировать кнопку, добавьте класс pure-button-disabled вместе с классом pure-button. Ещё вариант - добавьте атрибут disabled прямо в тег кнопки.

<button class="pure-button pure-button-disabled">Заблокированная кнопка</button>
<button class="pure-button" disabled>Заблокированная кнопка</button>

Активные кнопки

Чтобы кнопка выглядела «нажатой» (была активной), добавьте класс pure-button-active к pure-button.

Активная кнопка
<a class="pure-button pure-button-active" href="#">Активная кнопка</a>
<button class="pure-button pure-button-active">Активная кнопка</button>

Кнопка Primary (основная)

Чтобы указать, что кнопка основная, присвойте класс pure-button-primary вместе с классом pure-button.

Primary Button
<a class="pure-button pure-button-primary" href="#">Primary Button</a>
<button class="pure-button pure-button-primary">Primary Button</button>

Оформление кнопок

Благодаря тому, что Pure применяет минимально возможный набор стилей, совсем несложно создать индивидуальные кнопки для вашего приложения на основе стандартной.

Чтобы настроить стили кнопок, вы должны написать свой собственный CSS для класса, такого как button-foo. Этот класс добавьте к элементу, который уже имеет класс pure-button. Ниже приведены примеры.

Цветные кнопки со скруглёнными углами

<div>
    <style scoped>

        .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .button-success {
            background: rgb(28, 184, 65); /* зелёная кнопка */
        }

        .button-error {
            background: rgb(202, 60, 60); /* тёмно-бордовая */
        }

        .button-warning {
            background: rgb(223, 117, 20); /* оранжевая */
        }

        .button-secondary {
            background: rgb(66, 184, 221); /* голубая */
        }

    </style>

    <button class="button-success pure-button">Success Button</button>
    <button class="button-error pure-button">Error Button</button>
    <button class="button-warning pure-button">Warning Button</button>
    <button class="button-secondary pure-button">Secondary Button</button>
</div>

Размеры кнопок

<div>
    <style scoped>

        .button-xsmall {
            font-size: 70%; /* самая малая кнопка */
        }

        .button-small {
            font-size: 85%; /* малая кнопка */
        }

        .button-large {
            font-size: 110%; /* большая кнопка */
        }

        .button-xlarge {
            font-size: 125%; /* самая большая кнопка */
        }

    </style>

    <button class="button-xsmall pure-button">Extra Small Button</button>
    <button class="button-small pure-button">Small Button</button>
    <button class="pure-button">Regular Button</button>
    <button class="button-large pure-button">Large Button</button>
    <button class="button-xlarge pure-button">Extra Large Button</button>
</div>

Кнопки с иконками

Pure не содержит иконочных шрифтов, но кто мешает использовать их? Это просто. В примере ниже мы применили Font Awesome. Сделайте вызов CSS-файла Font Awesome на странице, и вставьте тег <i> внутрь тега кнопки с классом pure-button.

Checkout
<button class="pure-button">
    <i class="fa fa-cog"></i>
    Settings
</button>

<a class="pure-button" href="#">
    <i class="fa fa-shopping-cart fa-lg"></i>
    Checkout
</a>

Группы кнопок

Группируйте кнопки в одну строку.

<div class="pure-button-group" role="group" aria-label="Выбор каналов">
    <button class="pure-button">Первый канал</button>
    <button class="pure-button">Второй канал</button>
    <button class="pure-button pure-button-active">Ужасы</button>
</div>
Перевод c оригинального сайта purecss.io
© 2017 Aharito