本文概述
什么是按钮
在GUI(图形用户界面)中, 按钮是对话框中一个小的轮廓区域, 可用于通过单击来选择选项或命令。
不同类型的按钮的列表：
- 默认按钮
- 禁用的按钮
- 活动按钮
- 主要按钮
- 定制按钮
- 不同类型的按钮
- 带有图标的按钮
- 按钮组
Pure.CSS默认按钮
“纯按钮”类名用于任何<a>或<button>元素以创建纯按钮。
例：
请参见以下示例, 创建一个纯按钮。
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
<a class="pure-button"
href="#">A Pure Button</a>
<button class="pure-button">
A Pure Button</button>
</html>立即测试
输出
Pure.CSS禁用按钮
“纯按钮禁用”类名与纯按钮一起使用, 将按钮标记为禁用。
你也可以直接对按钮使用”已禁用”属性, 以获得相同的结果。
例子
请参阅两种方法来禁用按钮。
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
<button class="pure-button pure-button-disabled">A Disabled Button</button>
<button class="pure-button" disabled>A Disabled Button</button>
</html>立即测试
输出
Pure.CSS活动按钮
” pure-button-active”类名称与pure-button一起使用, 以对按钮进行样式设置, 使其看起来”被按下”。
你可以将pure-button-active类名放在任何<a>或<button>元素中。
例子
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
<a class="pure-button pure-button-active" href="#">Active Button</a>
<button class="pure-button pure-button-active">Active Button</button>
</html>立即测试
输出
Pure.CSS主按钮
你必须在” pure-button”旁边添加” pure-button-primary”类名, 以指示该按钮代表主要操作。
你可以将pure-button-primary类名放入任何<a>或<button>元素。
例子
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>
</html>立即测试
输出
定制按钮
你还可以为自己的应用程序定制按钮。定制纯按钮非常容易, 因为Pure.CSS需要最少的样式。
将自定义CSS分组到一个类中, 例如button-foo, 然后可以将其添加到已经具有纯按钮类名的元素中。
例子
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
<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);
}
.button-error {
background: rgb(202, 60, 60);
}
.button-warning {
background: rgb(223, 117, 20);
}
.button-secondary {
background: rgb(66, 184, 221);
}
</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>
</html>立即测试
输出
不同类型的按钮
- 超小按钮
- 小按钮
- 常规按钮
- 大按钮
- 超大按钮
例子
让我们以一个示例查看Pure.CSS中的所有按钮：
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
<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>
</html>立即测试
输出
带有图标的按钮
Pure不附带图标字体, 但是我们可以将图标字体与Pure Buttons一起使用。在下面的示例中, 我们使用的是Font Awesome中的图标字体。你必须将Font Awesome CSS文件放在页面上, 并在纯按钮元素中使用<i>元素。
通过使用以下代码, 在项目中使用font-awesome：
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">例子
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
<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>
</head>
</html>立即测试
输出
