CSS 纽扣
了解如何使用 CSS 设置按钮样式。
基本按钮样式
按钮颜色
使用 background-color 属性来改变按钮的背景颜色：
例子
.button1 {background-color: #4CAF50;} /* 绿色 */
.button2 {background-color: #008CBA;} /* 蓝色 */
.button3 {background-color: #f44336;} /* 红色 */
.button4 {background-color: #e7e7e7; color: black;} /* 灰色 */
.button5 {background-color: #555555;} /* 黑色 */
亲自尝试 »
按钮大小
使用 font-size 属性来改变按钮的字体大小：
例子
.按钮1 {字体大小:10px;}
.按钮2 {字体大小:12px;}
.button3 {字体大小:16px;}
.button4 {字体大小:20px;}
.button5 {字体大小:24px;}
亲自尝试 »
使用 padding 属性来改变按钮的填充：
例子
.按钮1 {padding: 10px 24px;}
.按钮2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
亲自尝试 »
圆形按钮
使用 border-radius 属性为按钮添加圆角：
例子
.按钮1 {边框半径：2px;}
.button2 {边框半径：4px;}
.button3 {边框半径：8px;}
.button4 {边框半径：12px;}
.button5 {边框半径：50%;}
亲自尝试 »
彩色按钮边框
使用 border 属性为按钮添加彩色边框：
悬停按钮
使用 :hover 选择器在鼠标移到按钮上时改变按钮的样式。
提示： 使用transition-duration 属性来确定“悬停”效果的速度：
阴影按钮
使用 box-shadow 属性为按钮添加阴影：
例子
.按钮1 {
盒子阴影：0 8px 16px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
}
.按钮2：悬停{
盒子阴影：0 12px 16px 0 rgba（0,0,0,0.24），0 17px 50px 0 rgba（0,0,0,0.19）；
}
亲自尝试 »
已禁用按钮
使用 opacity 属性为按钮添加透明度（创建“禁用”外观）。
提示： 您还可以添加cursor 属性值为“not-allowed”，当鼠标悬停在按钮上时将显示“禁止停车标志”：
按钮宽度
默认情况下，按钮的大小由其文本内容决定（与内容一样宽）。使用 width 属性来改变按钮的宽度：
按钮组
删除边距并添加 float:left 为每个按钮创建一个按钮组：
有边框按钮组
使用 border 属性来创建有边框的按钮组：
垂直按钮组
使用 display:block 代替float:left 将按钮分组放在一起，而不是并排排列：
图像上的按钮
