Pure.CSS按钮用法示例

本文概述

什么是按钮
不同类型的按钮

什么是按钮在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="http://www.srcmini.com/#"> 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="http://www.srcmini.com/#"> 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="http://www.srcmini.com/#"> 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="http://www.srcmini.com/#"> < i class="fa fa-shopping-cart fa-lg"> < /i> Checkout < /a> < /head> < /html>

立即测试
【Pure.CSS按钮用法示例】输出