Pure.CSS 按钮

什么是按钮

在 GUI（图形用户界面）中，按钮是对话框中的一个小轮廓区域，可以通过单击它来选择选项或命令。

不同类型的按钮列表

• 默认按钮
• 禁用按钮
• 活动按钮
• 主要按钮
• 自定义按钮
• 不同类型的按钮
• 带图标的按钮
• 按钮组

Pure.CSS 默认按钮

“pure-button”类名用于任何 <a> 或 <button> 元素以创建纯按钮。

示例

请参见以下示例以创建一个纯按钮。

输出

Pure.CSS 禁用按钮

“pure-button-disabled”类名与 pure-button 一起使用，用于将按钮标记为禁用。

您也可以直接对按钮使用“disabled”属性以获得相同的结果。

示例

请参见以下两种使按钮禁用的方法。

输出

Pure.CSS 活动按钮

“pure-button-active”类名与 pure-button 一起使用，用于设置按钮样式，使其看起来“被按下”。

您可以将 pure-button-active 类名添加到任何 <a> 或 <button> 元素。

示例

输出

Pure.CSS 主要按钮

您必须在 pure-button 旁边添加“pure-button-primary”类名，以表明该按钮代表主要操作。

您可以将 pure-button-primary 类名添加到任何 <a> 或 <button> 元素。

示例

输出

自定义按钮

您还可以为自己的应用程序自定义按钮。自定义纯按钮非常容易，因为 Pure.CSS 需要最少的样式。

将您的自定义 CSS 分组到一个类中，例如 button-foo，然后您可以将其添加到已经具有 pure-button 类名的元素中。

示例

输出

不同类型的按钮

• 超小按钮
• 小按钮
• 常规按钮
• 大按钮
• 超大按钮

示例

让我们来看一个示例，以查看 Pure.CSS 中的所有按钮

输出

带图标的按钮

Pure 不附带图标字体，但是我们可以将图标字体与 Pure 按钮一起使用。在下面的示例中，我们使用来自 Font Awesome 的图标字体。您必须将 Font Awesome CSS 文件放在您的页面上，并在 pure-button 元素中使用 <i> 元素。

使用以下代码在您的项目中使用 font-awesome

示例

输出