了解如何使用CSS样式按钮。
基本按键造型
例
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
} 试一试» 按钮颜色
使用background-color属性来更改按钮的背景颜色：
例
.button1 {background-color: #4CAF50;} /* Green */
.button2
{background-color: #008CBA;} /* Blue */
.button3 {background-color:
#f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5
{background-color: #555555;} /* Black */ 试一试» 按钮大小
使用font-size属性来更改按钮的大小：
例
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3
{font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;} 试一试» 圆形按钮
使用border-radius属性来圆角添加到一个按钮：
例
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3
{border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;} 试一试» 彩色按钮边框
使用border属性可以将彩色边框添加到一个按钮：
Hoverable按钮
使用:hover选择更改按钮的样式，当你在它移动鼠标。
提示：使用transition-duration属性来确定的“悬停”效果的速度：
例
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
... 试一试» 暗影按钮
使用box-shadow财产阴影添加到一个按钮：
例
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0
rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px
16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
} 试一试» 禁用的按钮
使用opacity属性来增加透明度按钮（创建一个“禁用”的样子）。
提示：您还可以添加cursor与“不容许”的值属性，它会显示一个“不停车标志”，当你的鼠标在按钮上：
按钮宽度
缺省情况下，按钮的尺寸是由它的文本内容（如宽作为其内容）确定。 使用width属性来更改按钮的宽度：
按钮组
删除利润率和增加float:left到每个按钮创建一个按钮组：
镶上按钮组
使用border属性创建边框按钮组：