.button {
  display: inline-block; /* 使鏈接顯示為塊級元素 */
  padding: 10px 20px; /* 設(shè)置內(nèi)邊距 */
  font-size: 16px; /* 設(shè)置字體大小 */
  color: #fff; /* 設(shè)置文字顏色 */
  background-color: #007BFF; /* 設(shè)置背景顏色 */
  border: none; /* 移除邊框 */
  border-radius: 5px; /* 設(shè)置圓角 */
  text-align: center; /* 文字居中 */
  text-decoration: none; /* 移除下劃線 */
  cursor: pointer; /* 鼠標(biāo)懸停時顯示手型光標(biāo) */
  transition: background-color 0.3s; /* 平滑過渡背景顏色變化 */
}

.button:hover {
  background-color: #0056b3; /* 鼠標(biāo)懸停時改變背景顏色 */
}

響應(yīng)式設(shè)計

為了確保按鈕在不同設(shè)備上都能良好顯示，我們可以使用媒體查詢來調(diào)整按鈕的樣式：

@media (max-width: 768px) {
  .button {
    padding: 8px 16px; /* 在小屏幕上減小內(nèi)邊距 */
    font-size: 14px; /* 減小字體大小 */
  }
}

按鈕的交互效果

為了增強(qiáng)用戶體驗，我們可以為按鈕添加一些交互效果，比如點(diǎn)擊時的陰影效果：

.button:active {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加陰影效果 */
}

總結(jié)

進(jìn)一步探索

• 考慮使用JavaScript來增強(qiáng)按鈕的交互性，比如添加點(diǎn)擊事件處理。
• 探索更多CSS屬性，如box-shadow、transition等，以實現(xiàn)更豐富的視覺效果。
• 學(xué)習(xí)如何使用CSS框架（如Bootstrap）來快速實現(xiàn)按鈕樣式。