按钮 - Pure | Pure中文站

默认按钮

给<a>或者 <button> 元素添加class pure-button，可实现默认按钮样式。

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

禁用按钮

先添加class pure-button，再加pure-button-disabled。

A Disabled Button

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

激活按钮

同样先添加pure-button，然后再添加 pure-button-active 就可以实现“激活/按下”的效果。

An Active Button

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

主要按钮（最常用的）

添加class pure-button 和 pure-button-primary。

A Primary 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只提供最小化样式，自定义变得很简单。

在添加class pure-button的基础上，再添加自己的class就行了，看下面2个例子。

自定义颜色和圆角

<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本身不提供图标，但它可以使用其他框架的图标。下面的例子使用Font Awesome。把Font Awesome 的CSS 文件引入页面，然后在pure-button里加个 <i> 元素。

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>

按钮

简单的CSS按钮样式