Pure 按钮(Buttons)
默认按钮
要创建Pure按钮,请将pure-button类名添加到任何元素或
A Pure Button
禁用按钮
要将按钮标记为已禁用,请在pure-button-disabled旁边添加类名pure-button。或者,直接将“禁用”属性添加到您的按钮。
活动按钮
要设置一个按钮,使其出现“按下”,请在pure-button-active旁边添加类名pure-button。
An Active Button
主要按钮
要指示一个按钮代表主要操作,请将pure-button-primary该类名旁边添加pure-button。
A Primary Button
自定义按钮
由于Pure的最小样式,可轻松构建通用Pure按钮,并为您自己的应用程序创建自定义按钮。
要自定义按钮样式,您应该将自定义CSS分组到类中button-foo,然后可以将其添加到已经具有pure-button类名称的元素中。这里有些例子。
带圆角的彩色按钮
不同大小的按钮
带图标的按钮
Pure不附带图标字体,但是我们和现有的字体一样玩。将图标字体与Pure Buttons结合起来很简单。在下面的示例中,我们使用Font Awesome的图标字体。将Font Awesome CSS文件放在页面上,并在元素中使用pure-button元素。
Checkout
按钮组
将多个按钮组合在一行。
对于辅助技术(即屏幕阅读器),role应提供一个属性来确保传达适当的含义。按钮组应该有一个role="group",而工具栏应该有role="toolbar"。
此外,应提供清晰的标签,因为大多数辅助技术不会公布。下面的代码片段提供了一个例子。