参考手册
CSS 表单
CSS 下拉选项样式
CSS 按钮动画效果
返回 CSS 表单

CSS 按钮

学习如何使用 CSS 设置按钮样式。

基本按钮样式

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .button {
  6.   background-color: #4CAF50;
  7.   border: none;
  8.   color: white;
  9.   padding: 15px 32px;
  10.   text-align: center;
  11.   text-decoration: none;
  12.   display: inline-block;
  13.   font-size: 16px;
  14.   margin: 4px 2px;
  15.   cursor: pointer;
  16. }
  17. </style>
  18. </head>
  19. <body>
  21. <h1>CSS 按钮</h1>
  23. <button>默认按钮</button>
  24. <a href="#" class="button">链接按钮</a>
  25. <button class="button">按钮</button>
  26. <input type="button" class="button" value="输入按钮">
  28. </body>
  29. </html>
运行一下

按钮颜色

请使用 background-color 属性更改按钮的背景色：

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .button {
  6.   background-color: #4CAF50; /* 绿色 */
  7.   border: none;
  8.   color: white;
  9.   padding: 15px 32px;
  10.   text-align: center;
  11.   text-decoration: none;
  12.   display: inline-block;
  13.   font-size: 16px;
  14.   margin: 4px 2px;
  15.   cursor: pointer;
  16. }
  18. .button2 {background-color: #008CBA;} /* 蓝色 */
  19. .button3 {background-color: #f44336;} /* 黑色 */
  20. .button4 {background-color: #e7e7e7; color: black;} /* 灰色 */
  21. .button5 {background-color: #555555;} /* 黑色 */
  22. </style>
  23. </head>
  24. <body>
  26. <h1>按钮颜色</h1>
  28. <p>通过 background-color 属性改变按钮的背景色：</p>
  30. <button class="button">绿色</button>
  31. <button class="button button2">蓝色</button>
  32. <button class="button button3">红色</button>
  33. <button class="button button4">灰色</button>
  34. <button class="button button5">黑色</button>
  36. </body>
  37. </html>
运行一下

按钮尺寸

请使用 font-size 属性更改按钮的字体大小：

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .button {
  6.   background-color: #4CAF50; /* 绿色 */
  7.   border: none;
  8.   color: white;
  9.   padding: 15px 32px;
  10.   text-align: center;
  11.   text-decoration: none;
  12.   display: inline-block;
  13.   margin: 4px 2px;
  14.   cursor: pointer;
  15. }
  17. .button1 {font-size: 10px;}
  18. .button2 {font-size: 12px;}
  19. .button3 {font-size: 16px;}
  20. .button4 {font-size: 20px;}
  21. .button5 {font-size: 24px;}
  22. </style>
  23. </head>
  24. <body>
  26. <h1>按钮大小</h1>
  28. <p>通过 font-size 属性改变按钮的字体大小：</p>
  30. <button class="button button1">10px</button>
  31. <button class="button button2">12px</button>
  32. <button class="button button3">16px</button>
  33. <button class="button button4">20px</button>
  34. <button class="button button5">24px</button>
  36. </body>
  37. </html>
运行一下

请使用 padding 属性更改按钮的内边距：

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .button {
  6.   background-color: #4CAF50; /* 绿色 */
  7.   border: none;
  8.   color: white;
  9.   text-align: center;
  10.   text-decoration: none;
  11.   display: inline-block;
  12.   font-size: 16px;
  13.   margin: 4px 2px;
  14.   cursor: pointer;
  15. }
  17. .button1 {padding: 10px 24px;}
  18. .button2 {padding: 12px 28px;}
  19. .button3 {padding: 14px 40px;}
  20. .button4 {padding: 32px 16px;}
  21. .button5 {padding: 16px;}
  22. </style>
  23. </head>
  24. <body>
  26. <h1>按钮大小</h1>
  28. <p>通过 padding 属性改变按钮的内边距：</p>
  30. <button class="button button1">10px 24px</button>
  31. <button class="button button2">12px 28px</button>
  32. <button class="button button3">14px 40px</button>
  33. <button class="button button4">32px 16px</button>
  34. <button class="button button5">16px</button>
  36. </body>
  37. </html>
运行一下

圆角按钮

请使用 border-radius 属性为按钮添加圆角：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .button {
  6.   background-color: #4CAF50; /* 绿色 */
  7.   border: none;
  8.   color: white;
  9.   padding: 20px;
  10.   text-align: center;
  11.   text-decoration: none;
  12.   display: inline-block;
  13.   font-size: 16px;
  14.   margin: 4px 2px;
  15.   cursor: pointer;
  16. }
  18. .button1 {border-radius: 2px;}
  19. .button2 {border-radius: 4px;}
  20. .button3 {border-radius: 8px;}
  21. .button4 {border-radius: 12px;}
  22. .button5 {border-radius: 50%;}
  23. </style>
  24. </head>
  25. <body>
  27. <h1>圆角按钮</h1>
  29. <p>通过 border-radius 属性为按钮添加圆角：</p>
  31. <button class="button button1">2px</button>
  32. <button class="button button2">4px</button>
  33. <button class="button button3">8px</button>
  34. <button class="button button4">12px</button>
  35. <button class="button button5">50%</button>
  37. </body>
  38. </html>
运行一下

彩色的按钮边框

请使用 border 属性为按钮添加彩色边框：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .button {
  6.   background-color: #4CAF50; /* 绿色 */
  7.   border: none;
  8.   color: white;
  9.   padding: 15px 32px;
  10.   text-align: center;
  11.   text-decoration: none;
  12.   display: inline-block;
  13.   font-size: 16px;
  14.   margin: 4px 2px;
  15.   cursor: pointer;
  16. }
  18. .button1 {
  19.   background-color: white;
  20.   color: black;
  21.   border: 2px solid #4CAF50;
  22. }
  24. .button2 {
  25.   background-color: white;
  26.   color: black;
  27.   border: 2px solid #008CBA;
  28. }
  30. .button3 {
  31.   background-color: white;
  32.   color: black;
  33.   border: 2px solid #f44336;
  34. }
  36. .button4 {
  37.   background-color: white;
  38.   color: black;
  39.   border: 2px solid #e7e7e7;
  40. }
  42. .button5 {
  43.   background-color: white;
  44.   color: black;
  45.   border: 2px solid #555555;
  46. }
  47. </style>
  48. </head>
  49. <body>
  51. <h1>有颜色的按钮边框</h1>
  53. <p>请使用 border 属性为按钮添加边框：</p>
  55. <button class="button button1">绿色</button>
  56. <button class="button button2">蓝色</button>
  57. <button class="button button3">黑色</button>
  58. <button class="button button4">灰色</button>
  59. <button class="button button5">黑色</button>
  61. </body>
  62. </html>
运行一下

可悬停按钮


当鼠标移动到按钮上方时，使用 :hover 选择器可更改按钮的样式。

提示：请使用 transition-duration 属性来确定“悬停”效果的速度：

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .button {
  6.   background-color: #4CAF50; /* Green */
  7.   border: none;
  8.   color: white;
  9.   padding: 16px 32px;
  10.   text-align: center;
  11.   text-decoration: none;
  12.   display: inline-block;
  13.   font-size: 16px;
  14.   margin: 4px 2px;
  15.   transition-duration: 0.4s;
  16.   cursor: pointer;
  17. }
  19. .button1 {
  20.   background-color: white;
  21.   color: black;
  22.   border: 2px solid #4CAF50;
  23. }
  25. .button1:hover {
  26.   background-color: #4CAF50;
  27.   color: white;
  28. }
  30. .button2 {
  31.   background-color: white;
  32.   color: black;
  33.   border: 2px solid #008CBA;
  34. }
  36. .button2:hover {
  37.   background-color: #008CBA;
  38.   color: white;
  39. }
  41. .button3 {
  42.   background-color: white;
  43.   color: black;
  44.   border: 2px solid #f44336;
  45. }
  47. .button3:hover {
  48.   background-color: #f44336;
  49.   color: white;
  50. }
  52. .button4 {
  53.   background-color: white;
  54.   color: black;
  55.   border: 2px solid #e7e7e7;
  56. }
  58. .button4:hover {background-color: #e7e7e7;}
  60. .button5 {
  61.   background-color: white;
  62.   color: black;
  63.   border: 2px solid #555555;
  64. }
  66. .button5:hover {
  67.   background-color: #555555;
  68.   color: white;
  69. }
  70. </style>
  71. </head>
  72. <body>
  74. <h1>可悬停的按钮</h1>
  76. <p>使用 :hover 选择器在鼠标移动到按钮上时改变其样式。</p>
  78. <p><b>提示：</b>请使用 transition-duration 属性来确定悬停效果的速度：</p>
  80. <button class="button button1">绿色</button>
  81. <button class="button button2">蓝色</button>
  82. <button class="button button3">红色</button>
  83. <button class="button button4">灰色</button>
  84. <button class="button button5">黑色</button>
  86. </body>
  87. </html>
运行一下

阴影按钮

请使用 box-shadow 属性为按钮添加阴影：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .button {
  6.   background-color: #4CAF50; /* Green */
  7.   border: none;
  8.   color: white;
  9.   padding: 15px 32px;
  10.   text-align: center;
  11.   text-decoration: none;
  12.   display: inline-block;
  13.   font-size: 16px;
  14.   margin: 4px 2px;
  15.   cursor: pointer;
  16.   -webkit-transition-duration: 0.4s; /* Safari */
  17.   transition-duration: 0.4s;
  18. }
  20. .button1 {
  21.   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  22. }
  24. .button2:hover {
  25.   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  26. }
  27. </style>
  28. </head>
  29. <body>
  31. <h1>阴影按钮</h1>
  33. <p>使用 box-shadow 属性为按钮添加阴影：</p>
  35. <button class="button button1">阴影按钮</button>
  36. <button class="button button2">悬停时的阴影</button>
  38. </body>
  39. </html>
运行一下

禁用的按钮

请使用 opacity 属性为按钮添加透明度（创建“禁用”外观）。

提示：您还可以添加带有 "not-allowed" 值的 cursor 属性，当您将鼠标悬停在按钮上时，该属性会显示 "no parking sign"（禁停标志）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .button {
  6.   background-color: #4CAF50; /* 绿色 */
  7.   border: none;
  8.   color: white;
  9.   padding: 15px 32px;
  10.   text-align: center;
  11.   text-decoration: none;
  12.   display: inline-block;
  13.   font-size: 16px;
  14.   margin: 4px 2px;
  15.   cursor: pointer;
  16. }
  18. .disabled {
  19.   opacity: 0.6;
  20.   cursor: not-allowed;
  21. }
  22. </style>
  23. </head>
  24. <body>
  26. <h1>被禁用的按钮</h1>
  28. <p>使用 opacity 属性向按钮添加一定的透明度（使它看上去已被禁用）</p>
  30. <button class="button">正常按钮</button>
  31. <button class="button disabled">被禁用的按钮</button>
  33. </body>
  34. </html>
运行一下

按钮宽度



默认情况下，按钮的大小取决于其文本内容（与内容的宽度一样）。请使用 width 属性来更改按钮的宽度：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .button {
  6.   background-color: #4CAF50; /* Green */
  7.   border: none;
  8.   color: white;
  9.   padding: 15px 32px;
  10.   text-align: center;
  11.   text-decoration: none;
  12.   display: inline-block;
  13.   font-size: 16px;
  14.   margin: 4px 2px;
  15.   cursor: pointer;
  16. }
  18. .button1 {width: 250px;}
  19. .button2 {width: 50%;}
  20. .button3 {width: 100%;}
  21. </style>
  22. </head>
  23. <body>
  25. <h1>按钮宽度</h1>
  27. <p>使用 width 属性来改变按钮的宽度：</p>
  29. <p><b>提示：</b>请使用像素设置固定宽度，并为响应式按钮使用百分百（例如其父元素的 50%）。请调整窗口大小来查看效果。</p>
  31. <button class="button button1">250px</button><br>
  32. <button class="button button2">50%</button><br>
  33. <button class="button button3">100%</button>
  35. </body>
  36. </html>
运行一下

按钮分组

删除外边距并向每个按钮添加 float:left，来创建按钮组：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .btn-group .button {
  6.   background-color: #4CAF50; /* 绿色 */
  7.   border: none;
  8.   color: white;
  9.   padding: 15px 32px;
  10.   text-align: center;
  11.   text-decoration: none;
  12.   display: inline-block;
  13.   font-size: 16px;
  14.   cursor: pointer;
  15.   float: left;
  16. }
  18. .btn-group .button:hover {
  19.   background-color: #3e8e41;
  20. }
  21. </style>
  22. </head>
  23. <body>
  25. <h1>按钮组</h1>
  27. <p>删除外边距并浮动按钮，来创建一个按钮组：</p>
  29. <div class="btn-group">
  30.   <button class="button">Button</button>
  31.   <button class="button">Button</button>
  32.   <button class="button">Button</button>
  33.   <button class="button">Button</button>
  34. </div>
  36. <p style="clear:both"><br>请记得之后清除浮动，否则这个 p 元素会向按钮浮动。</p>
  38. </body>
  39. </html>
运行一下

带边框的按钮组

使用 border 属性来创建带边框的按钮组：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .btn-group .button {
  6.   background-color: #4CAF50; /* 绿色 */
  7.   border: 1px solid green;
  8.   color: white;
  9.   padding: 15px 32px;
  10.   text-align: center;
  11.   text-decoration: none;
  12.   display: inline-block;
  13.   font-size: 16px;
  14.   cursor: pointer;
  15.   float: left;
  16. }
  18. .btn-group .button:not(:last-child) {
  19.   border-right: none; /* 阻止双边框 */
  20. }
  22. .btn-group .button:hover {
  23.   background-color: #3e8e41;
  24. }
  25. </style>
  26. </head>
  27. <body>
  29. <h1>带边框的按钮组</h1>
  31. <p>添加边框，来创建带按钮的按钮组：</p>
  33. <div class="btn-group">
  34.   <button class="button">Button</button>
  35.   <button class="button">Button</button>
  36.   <button class="button">Button</button>
  37.   <button class="button">Button</button>
  38. </div>
  40. <p style="clear:both"><br>请记得之后清除浮动，否则这个 p 元素会向按钮浮动。</p>
  42. </body>
  43. </html>
运行一下

垂直按钮组

使用 display:block 取代 float:left 将按钮上下分组，而不是并排：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .btn-group .button {
  6.   background-color: #4CAF50; /* 绿色 */
  7.   border: 1px solid green;
  8.   color: white;
  9.   padding: 15px 32px;
  10.   text-align: center;
  11.   text-decoration: none;
  12.   font-size: 16px;
  13.   cursor: pointer;
  14.   width: 150px;
  15.   display: block;
  16. }
  18. .btn-group .button:not(:last-child) {
  19.   border-bottom: none; /* 阻止双边框 */
  20. }
  22. .btn-group .button:hover {
  23.   background-color: #3e8e41;
  24. }
  25. </style>
  26. </head>
  27. <body>
  29. <h1>垂直按钮分组</h1>
  31. <div class="btn-group">
  32.   <button class="button">按钮</button>
  33.   <button class="button">按钮</button>
  34.   <button class="button">按钮</button>
  35.   <button class="button">按钮</button>
  36. </div>
  38. </body>
  39. </html>
运行一下

图像上的按钮

Snow 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .container {
  6.   position: relative;
  7.   width: 100%;
  8.   max-width: 400px;
  9. }
  11. .container img {
  12.   width: 100%;
  13.   height: auto;
  14. }
  16. .container .btn {
  17.   position: absolute;
  18.   top: 50%;
  19.   left: 50%;
  20.   transform: translate(-50%, -50%);
  21.   -ms-transform: translate(-50%, -50%);
  22.   background-color: #f1f1f1;
  23.   color: black;
  24.   font-size: 16px;
  25.   padding: 16px 30px;
  26.   border: none;
  27.   cursor: pointer;
  28.   border-radius: 5px;
  29.   text-align: center;
  30. }
  32. .container .btn:hover {
  33.   background-color: black;
  34.   color: white;
  35. }
  36. </style>
  37. </head>
  38. <body>
  40. <h2>图片上的按钮</h2>
  42. <div class="container">
  43.   <img src="/znadmin/md/1269/0.jpg" alt="Snow" style="width:100%">
  44.   <button class="btn">Button</button>
  45. </div>
  47. </body>
  48. </html>
运行一下
CSS 下拉选项样式
CSS 按钮动画效果

分类导航