卡卡网

本文介绍6个纯CSS按钮(button)实例，漂亮又实用，代码使用简单，又具有很强的可迁性，基本上在任何一张网页都能很容易就能用上这些按钮样式。

纯CSS按钮(button)

实例1：普通按钮

创建一个普通按钮，只需在<a>或<button>元素添加pure-button类。

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

demodownload

实例2：不可用按钮(disabled button)

要创建一个不可用按钮，只需在<a>元素里添加pure-button类和pure-button-disabled类，或者在<button>元素里，添加pure-button类，同时添加disabled属性。

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

demodownload

实例3：活动按钮(active button)

当你要标识已经点击过的按钮时，可在<a>或<button>元素里添加一个pure-button-active类。

<a class="pure-button pure-button-active" href="#">活动按钮</a>
<button class="pure-button pure-button-active">活动按钮</button>

demodownload

实例4：主要按钮

当你要显示哪些是主要按钮时，可在<a>或<button>元素里添加一个pure-button-primary类。

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

demodownload

实例5：自定义按钮样式

为了自定义按钮样式，你应该把你的自定义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">成功按钮</button>
    <button class="button-error pure-button">错误按钮</button>
    <button class="button-warning pure-button">警告按钮</button>
    <button class="button-secondary pure-button">次级按钮</button>
</div>

demodownload

实例6：不同大小的按钮

类似实例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

实例7：字体图标按钮

字体图标按钮很酷很实用，这里我们要用到Font Awesome字体库文件。

首先要在html代码里引用Font Awesome CSS文件，然后在使用pure-button类的元素里添加一个<i>元素。

<button class="pure-button">
    <i class="fa fa-cog"></i>
    设置
</button>

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

demodownload

注意！字体图标要在Web服务器上做相应配置，才能显示。参考文章：Linux Nginx安装配置Font Awesome图标字体，IIS7.5安装配置Font Awesome图标字体的方法。

实例8：按钮组

一行把多个按钮放在一起。

<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">活动按钮</button>
</div>

demodownload

标签: button  按钮  css  css3