Кнопки

Кнопки по умолчанию

Чтобы создать чистую кнопку, добавьте имя pure-buttonкласса к любому элементу <a>или <button>.

<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>

Отключенные кнопки

Чтобы пометить кнопку как отключенную, добавьте pure-button-disabledрядом с ней имя класса pure-button. Как вариант, добавьте атрибут «отключено» прямо на кнопку.

<button class="pure-button pure-button-disabled">A Disabled Button</button>
<button class="pure-button" disabled="">A Disabled Button</button>

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

Чтобы оформить кнопку так, чтобы она казалась «нажатой», добавьте pure-button-activeрядом с ней имя класса pure-button.

Активная кнопка

<a class="pure-button pure-button-active" href="#">An Active Button</a>
<button class="pure-button pure-button-active">An Active Button</button>

Основные кнопки

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

Основная кнопка

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

Настройка кнопок

Благодаря минималистичному стилю Pure, можно легко построить на основе общей кнопки 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);
            /* this is a green */
        }

        .button-error {
            background: rgb(202, 60, 60);
            /* this is a maroon */
        }

        .button-warning {
            background: rgb(223, 117, 20);
            /* this is an orange */
        }

        .button-secondary {
            background: rgb(66, 184, 221);
            /* this is a light blue */
        }
    </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 не поставляется с иконочными шрифтами, но мы хорошо умеем работать с существующими. Включение иконочных шрифтов в Pure Buttons очень просто. В приведенном ниже примере мы используем шрифты-иконки от Font Awesome . Поместите файл CSS Font Awesome на свою страницу и используйте <i>элемент внутри pure-buttonэлемента.

Проверить

<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">A Pure Button</button>
    <button class="pure-button">A Pure Button</button>
    <button class="pure-button pure-button-active">A Pure Button</button>
</div>