Pure按钮
郭鸿信
Pure默认按钮样式
class="pure-button"
禁用按钮
class="pure-button pure-button-display"
激活按钮
class="pure-button pure-button-active"
主要按钮
class="pure-button pure-button-primary"感觉主要的区别是颜色变成蓝了
自定义按钮风格
就是自己写css样式，然后再加入到class属性中
添加图标
图标地址
图标样式
图标例子
将Font Awesome 的CSS文件 导入，然后像下面的方法使用
<button class="pure-button">
<i class="fa fa-cog"></i>
Settings
</button>我的测试代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./pure-release-0.6.0/pure-min.css">
<link rel="stylesheet" type="text/css" href="./pure-release-0.6.0/grids-responsive-min.css">
<link rel="stylesheet" type="text/css" href="./font-awesome-4.6.3/css/font-awesome.min.css">
<meta name="name" content="content" charset="utf-8">
<style type="text/css" media="screen">
.button-xsmall{
font-size:60%;
}
.button-small{
font-size:70%;
}
.button-xbig{
font-size:90%;
}
.button-big{
font-size:100%;
}
.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>
</head>
<body>
<!-- <a href="https://www.baidu.com" title=""><button class="pure-button pure-button-primary button-xsmall "><i class="fa fa-shopping-cart fa-2x"></i>百度</button></a> -->
<button class="pure-button pure-button-primary button-xsmall button-success">超小号</button>
<button class="pure-button button-small pure-button-disabled button-error">小号</button>
<button class="pure-button button-xbig pure-button-active button-warning">大号</button>
<button class="pure-button button-big button-secondary">超大号</button>
<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>
<div class="list-group">
<a class="pure-button" href="#"><i class="fa fa-home " aria-hidden="true"></i> Home</a>
<a class="pure-button" href="#"><i class="fa fa-book " aria-hidden="true"></i> Library</a>
<a class="pure-button" href="#"><i class="fa fa-pencil " aria-hidden="true"></i> Applications</a>
<a class="pure-button
" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
</body>
</html>（ 于2016年9月22日，http://blog.csdn.net/bzd_111）
类似资料：