卡卡網(wǎng)

本文介紹6個(gè)純CSS按鈕(button)實(shí)例，漂亮又實(shí)用，代碼使用簡單，又具有很強(qiáng)的可遷性，基本上在任何一張網(wǎng)頁都能很容易就能用上這些按鈕樣式。

純CSS按鈕(button)

實(shí)例1：普通按鈕

創(chuàng)建一個(gè)普通按鈕，只需在<a>或<button>元素添加pure-button類。

<a class="pure-button" href="#">普通按鈕</a>
<button class="pure-button">普通按鈕</button>

demodownload

實(shí)例2：不可用按鈕(disabled button)

要?jiǎng)?chuàng)建一個(gè)不可用按鈕，只需在<a>元素里添加pure-button類和pure-button-disabled類，或者在<button>元素里，添加pure-button類，同時(shí)添加disabled屬性。

<button class="pure-button pure-button-disabled">不可用按鈕</button>
<button class="pure-button" disabled>不可用按鈕</button>

demodownload

實(shí)例3：活動(dòng)按鈕(active button)

當(dāng)你要標(biāo)識(shí)已經(jīng)點(diǎn)擊過的按鈕時(shí)，可在<a>或<button>元素里添加一個(gè)pure-button-active類。

<a class="pure-button pure-button-active" href="#">活動(dòng)按鈕</a>
<button class="pure-button pure-button-active">活動(dòng)按鈕</button>

demodownload

實(shí)例4：主要按鈕

當(dāng)你要顯示哪些是主要按鈕時(shí)，可在<a>或<button>元素里添加一個(gè)pure-button-primary類。

<a class="pure-button pure-button-primary" href="#">主要按鈕</a>
<button class="pure-button pure-button-primary">主要按鈕</button>

demodownload

實(shí)例5：自定義按鈕樣式

為了自定義按鈕樣式，你應(yīng)該把你的自定義CSS歸組到一個(gè)類，如button-foo，然后把這個(gè)類加到已經(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">成功按鈕</button>
    <button class="button-error pure-button">錯(cuò)誤按鈕</button>
    <button class="button-warning pure-button">警告按鈕</button>
    <button class="button-secondary pure-button">次級(jí)按鈕</button>
</div>

demodownload

實(shí)例6：不同大小的按鈕

類似實(shí)例5，我們還可以自定義不同大小的按鈕樣式。

<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">超小按鈕</button>
    <button class="button-small pure-button">小按鈕</button>
    <button class="pure-button">普通按鈕</button>
    <button class="button-large pure-button">大按鈕</button>
    <button class="button-xlarge pure-button">超大按鈕</button>
</div>

demodownload

實(shí)例7：字體圖標(biāo)按鈕

字體圖標(biāo)按鈕很酷很實(shí)用，這里我們要用到Font Awesome字體庫文件。

首先要在html代碼里引用Font Awesome CSS文件，然后在使用pure-button類的元素里添加一個(gè)<i>元素。

<button class="pure-button">
    <i class="fa fa-cog"></i>
    設(shè)置
</button>

<a class="pure-button" href="#">
    <i class="fa fa-shopping-cart fa-lg"></i>
    購買
</a>

demodownload

注意！字體圖標(biāo)要在Web服務(wù)器上做相應(yīng)配置，才能顯示。參考文章：Linux Nginx安裝配置Font Awesome圖標(biāo)字體，IIS7.5安裝配置Font Awesome圖標(biāo)字體的方法。

實(shí)例8：按鈕組

一行把多個(gè)按鈕放在一起。

<div class="pure-button-group" role="group" aria-label="...">
    <button class="pure-button">普通按鈕</button>
    <button class="pure-button">普通按鈕</button>
    <button class="pure-button pure-button-active">活動(dòng)按鈕</button>
</div>

demodownload

標(biāo)簽: button  按鈕  css  css3