CSS中的提交按鈕 提交按鈕是表單中必不可少的組件，但它的樣式通常被忽略。CSS可以幫助我們輕松地修改提交按鈕的外觀和交互效果，從而提高用戶體驗(yàn)。 首先，我們可以使用CSS的偽類選擇器來為提交按鈕定義鼠標(biāo)懸停和按下時(shí)的樣式。例如，我們可以使用:hover偽類選擇器定義鼠標(biāo)懸停時(shí)的背景顏色：

input[type="submit"]:hover {
background-color: #4CAF50;
}

接著，我們可以使用CSS的屬性選擇器為不同類型的提交按鈕設(shè)置樣式。例如，我們可以使用[type="submit"]屬性選擇器為所有提交按鈕設(shè)置相同的樣式：

input[type="submit"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

此外，我們還可以使用CSS的偽元素選擇器來添加提交按鈕的圖標(biāo)。以下示例使用:before偽元素選擇器添加一個(gè)“提交”圖標(biāo)：

input[type="submit"]::before {
content: "\f058";
font-family: FontAwesome;
margin-right: 10px;
}

最后，我們可以使用CSS的過渡效果來為提交按鈕添加動(dòng)畫效果。以下示例使用transition屬性為鼠標(biāo)懸停和按下時(shí)的背景顏色添加過渡效果：

input[type="submit"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
input[type="submit"]:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}

總之，通過使用CSS，我們可以為提交按鈕添加各種效果，例如動(dòng)畫、鼠標(biāo)懸停、按下效果等，使表單更加人性化。