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

 

　　纯CSS按钮（button）

 

　　实例1：普通按钮

 

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

 

　　普通按钮

 

　　普通按钮

 

　　实例2：不可用按钮（disabled button）

 

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

 

　　不可用按钮

 

　　不可用按钮

 

　　实例3：活动按钮（active button）

 

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

 

　　活动按钮

 

　　活动按钮

 

　　实例4：主要按钮

 

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

 

　　主要按钮

 

　　主要按钮

 

　　实例5：自定义按钮样式

 

　　为了自定义按钮样式，你应该把你的自定义CSS归组到一个类，如button-foo，然后把这个类加到已经加了pure-button类的元素里。这里是一些例子。

 

　　。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）;?

 

　　}

 

　　。button-error?{

 

　　background:?rgb（202,?60,?60）;?

 

　　}

 

　　。button-warning?{

 

　　background:?rgb（223,?117,?20）;?

 

　　}

 

　　。button-secondary?{

 

　　background:?rgb（66,?184,?221）;?

 

　　}

 

　　成功按钮

 

　　错误按钮

 

　　警告按钮

 

　　次级按钮

 

　　实例6：不同大小的按钮

 

　　类似实例5，我们还可以自定义不同大小的按钮样式。

 

　　。button-xsmall?{

 

　　font-size:?70%;

 

　　}

 

　　。button-small?{

 

　　font-size:?85%;

 

　　}

 

　　。button-large?{

 

　　font-size:?110%;

 

　　}

 

　　。button-xlarge?{

 

　　font-size:?125%;

 

　　}

 

　　超小按钮

 

　　小按钮

 

　　普通按钮

 

　　大按钮

 

　　超大按钮

 

　　实例7：字体图标按钮

 

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

 

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

 

　　设置

 

　　购买

 

　　实例8：按钮组

 

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

 

　　普通按钮

 

　　普通按钮

 

　　活动按钮