📌  相关文章
📜  纯CSS按钮

📅  最后修改于: 2021-01-08 05:10:18             🧑  作者: Mango

纯CSS按钮

什么是按钮

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

不同类型的按钮的列表：

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

Pure.CSS默认按钮

“纯按钮”类名用于任何或

输出：

纯CSS禁用按钮

“纯按钮禁用”类名与纯按钮一起使用，将按钮标记为禁用。

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

例

请参阅两种方法来禁用按钮。

输出：

Pure.CSS活动按钮

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

您可以将pure-button-active类名放在任何或

输出：

Pure.CSS主按钮

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

您可以将pure-button-primary类名放入任何或

输出：

定制按钮

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

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

例

输出：

不同类型的按钮

例

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

输出：

带有图标的按钮

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

通过使用以下代码，在项目中使用font-awesome：

例





  






    
    Checkout

输出：