JS-CSS代码-按钮-各种风格-html5

1.常规按钮

  常用的矩形圆角按钮。如下运行的基本html5代码：

DOCTYPE html>


 
菜鸟教程(runoob.com) 

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}



默认按钮
链接按钮
按钮

  不同颜色的按钮代码：

.button1 {background-color: #4CAF50;} /* 绿色 */
.button2 {background-color: #008CBA;} /* 蓝色 */
.button3 {background-color: #f44336;} /* 红色 */
.button4 {background-color: #e7e7e7; color: black;} /* 灰色 */
.button5 {background-color: #555555;} /* 黑色 */

  不同文字的按钮代码:

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

  不同圆角的代码:

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

  不同边框颜色代码：

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}

2.专业按钮

  接下来的按钮涉及较多的CSS样式，本人将其上传到CSDN资源目录，下载地址：https://download.csdn.net/download/m0_67316550/86806975

2.1.三维效果按钮

    
    点击
    点击
    
     点击
    点击

2.2.突起样式的按钮

    Click me
    
    Click me
    Click me!
    Click me!

2.3.为按钮中的文字赋予扁平效果的阴影

2.4.按钮周围有一圈光晕效果

    Go
    Go
    
    Go
    Go
    Go

2.4.矩形按钮

    
        选择 
    
    
         选择
    
    
        选择 
    
    
        选择 
    
    
         选择 
    

2.5.一组相关的按钮被并排排列

    
        Option 1
        Option 2
        Option 3
         Select Me 
    

    
        Option 1
        Option 2
        Option 3
    

    
        Option 1
        Option 2
        Option 3
    

2.6.堆叠按钮

    Go
    Go
    Go
    Go
    Go
    Go

2.7.额外的环绕效果

  
    
      
    
  

  
    
      
    
  

  
    Go
  

  
    Go
  

2.8.表单按钮

    
    Go
    
    Go
    Go
    Go

2.9.各种文字样式

    uppercase
    lowercase
    capitalize
    small caps

3.作者答疑

  如有疑问，请留言。