Pure按鈕

默認(rèn)按鈕

要?jiǎng)?chuàng)建Pure按鈕，請(qǐng)將pure-button類名添加到任何元素<a>或<button>元素。

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

禁用按鈕

要將按鈕標(biāo)記為已禁用，請(qǐng)?jiān)趐ure-button-disabled旁邊添加類名pure-button。或者，直接將“禁用”屬性添加到您的按鈕。

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

活動(dòng)按鈕

要設(shè)置一個(gè)按鈕，使其出現(xiàn)“按下”，請(qǐng)?jiān)趐ure-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>

主要按鈕

要指示一個(gè)按鈕代表主要操作，請(qǐng)將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的最小樣式，可輕松構(gòu)建通用Pure按鈕，并為您自己的應(yīng)用程序創(chuàng)建自定義按鈕。

要自定義按鈕樣式，您應(yīng)該將自定義CSS分組到類中button-foo，然后可以將其添加到已經(jīng)具有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>

帶圖標(biāo)的按鈕

Pure不附帶圖標(biāo)字體，但是我們和現(xiàn)有的字體一樣玩。將圖標(biāo)字體與Pure Buttons結(jié)合起來很簡單。在下面的示例中，我們使用Font Awesome的圖標(biāo)字體。將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>

按鈕組

將多個(gè)按鈕組合在一行。

對(duì)于輔助技術(shù)（即屏幕閱讀器），role應(yīng)提供一個(gè)屬性來確保傳達(dá)適當(dāng)?shù)暮x。按鈕組應(yīng)該有一個(gè)role="group"，而工具欄應(yīng)該有role="toolbar"。

此外，應(yīng)提供清晰的標(biāo)簽，因?yàn)榇蠖鄶?shù)輔助技術(shù)不會(huì)公布。下面的代碼片段提供了一個(gè)例子。

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