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

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

響應式設計

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

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

按鈕的交互效果

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

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

總結

進一步探索

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