Pure按钮

默认按钮

要创建Pure按钮，请将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的图标字体。将Font Awesome CSS文件放在页面上，并在<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>

按钮组

将多个按钮组合在一行。

对于辅助技术（即屏幕阅读器），role应提供一个属性来确保传达适当的含义。按钮组应该有一个role="group"，而工具栏应该有role="toolbar"。

此外，应提供清晰的标签，因为大多数辅助技术不会公布。下面的代码片段提供了一个例子。

<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>