入门 CSS 按钮类型

Primer CSS是一个免费的开源 CSS 框架，它建立在创建基本样式元素（如间距、排版和颜色）基础的系统之上。它是一个帮助我们以足够的灵活性有效地构建一致的用户体验的系统。这种系统化的方法确保我们的风格是一致的并且可以相互操作。它具有高度可组合的间距比例、可定制的排版和有意义的颜色。它具有高度可重用性和灵活性，是使用 GitHub 的设计系统创建的。

按钮是任何网站中的重要组件，用于在用户单击按钮时生成事件。 Primer CSS 为我们提供了各种类型的按钮。此功能在 Primer CSS 中称为按钮类型。

入门 CSS 按钮类型类：

• btn：这个类用于为一般页面操作创建一个简单的按钮。它被称为默认按钮。
• btn-primary：该类用于创建绿色的主按钮，用于指示页面上的主要操作。
• btn-outline：这个类用于创建一个大纲按钮，该按钮淡化一个动作，看起来像链接。
• btn-danger：这个类用于创建一个红色的危险按钮。

句法：

    ...

其他类的语法是相同的，只是类的名称会改变。

示例 1：以下示例演示了使用btn和btn-primary类分别创建默认按钮和主按钮。

HTML

  

    
    

  

    

        

            GeeksforGeeks
        
          
        
 Primer CSS Button Types 
    
    

  
    
    
        Default Button
    
    
        Default Button 2
    
  
    
    
        Primary Button
    
    
        Primary Button 2
    

  

输出：

示例 2：以下示例演示了使用btn-outline和btn-danger类分别创建大纲按钮和危险按钮。当您将鼠标悬停在在线按钮或危险按钮上时，整个按钮将分别变为蓝色或红色。

HTML

  

    
    
  
    

  

    

        

            GeeksforGeeks
        
        
 Primer CSS Button Types 
    
    

  
    
    
        Outline Button
    
    
        Outline Button 2
    
      
    
    
        Danger Button
    
    
        Danger Button 2
    

  

输出：

参考： https://primer.style/css/components/buttons