按钮 - Pure - Pure.css 中文

默认按钮

要创建 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 一起添加。或者，直接将 “disabled”属性添加到按钮中。

<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>
        .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>
        .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 按钮结合使用非常简单。在下面的示例中，我们使用了 Font Awesome 中的图标字体。将 Font Awesome CSS 文件放在页面上，并在 pure-button 元素中使用 <i> 元素。

结帐

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