了解如何使用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屬性創建邊框按鈕組：