CSS |纽扣

按钮是网页中最常用的元素之一。按钮用于事件处理和与用户交互。从提交表单，到查看一些信息，我们必须点击按钮。
Button 标签用于在 HTML 中创建按钮。下面给出了一个简单的按钮标签示例：

例子：

 
 

    

 
    
GeeksforGeeks
      
    
button tag
      
    Button

                    

输出：

按钮中的基本样式：有许多 CSS 属性用于设置按钮元素的样式，如下所述：

• background-color：该属性用于设置按钮的背景颜色。

  句法：

  element {
      // background-color style
  }

  例子：

   
   
    
   
      
        
      
  
    
   
      Red
      Blue
      Green
      Yellow
   
                      
  

  输出：
  

• border：该属性用于设置按钮的边框。

  句法：

  element {
      // border style
  }

  例子：

   
   
    
   
      
        
      
  
    
   
      None
      Solid
      Dashed
      Double
      Groove
   
                      
  

  输出：
  

• color：该属性用于设置按钮中文本的颜色。可以根据颜色名称、颜色十六进制代码等设置颜色值。

  句法：

  element {
      // color style
  }

  例子：

   
   
    
   
      
        
      
  
    
   
      White
      Black
      Blue
   
                      
  

  输出 ：
  

• padding：该属性用于设置按钮的内边距。

  句法：

  element {
      // padding style
  }

  例子：

   
   
    
   
      
        
      
  
    
   
      15px 32px
      24px 50px
      32px 32px
      16px
   
                      
  

  输出：
  

• font-size：该属性用于设置按钮中文本的大小。更改像素值以获得所需的大小。

  句法：

  element {
      // font-size style
  }

  例子：

   
   
    
   
      
        
      
  
    
   
      10px 
      15px
      20px
      30px
   
                      
  

  输出：
  

• border-radius：该属性用于设置按钮的边框半径。它设置边框的圆角。

  句法：

  element {
      // border-radius property
  }

  例子：

   
   
    
   
      
        
      
  
    
   
      3px 
      6px
      10px
      20px
      50%
   
                      
  

  输出：
  

• box-shadow：该属性用于创建按钮框的阴影。

  句法：

  box-shadow: [horizontal offset] [vertical offset] [blur radius] 
              [optional spread radius] [color];
  

  例子：

   
   
    
   
      
        
      
  
    
   
      Shadow 1 
   
                      
  

  输出：
  

• width：该属性用于设置按钮的宽度。

  风格：

  element {
      // width property
  }

  例子：

   
   
    
   
      
      
   
    
  
      100px 
      200px 
      50% 
      100%
   
                      
  

  输出：
  

• Hover Effects：此属性用于更改鼠标移动时的按钮界面。

  句法：

  element:hover {
      // CSS property
  }

  例子：

   
   
    
   
      
        
      
   
    
  
      Green 
      Orange 
   
                      
  

  输出：