超連結(HyperLink)和按鈕(Button)(hover, active, visited, focus, cursor) | CSS

網頁中有兩個重要的用戶互動元素——超鏈接和按鈕，我們將介紹使用CSS來增強它們的外觀和互動性。

See the Pen HyperLink Button | CSS by lenrich (@lenrich) on CodePen.

超鏈接樣式:

超鏈接，或錨點標籤 ，對於導航至關重要。
CSS提供了多樣的樣式選項，以自定義超鏈接的外觀。
設計人員可以定義鏈接在不同情況下的行為，使用偽類增強用戶的反饋和互動。如 :

  • :hover
  • :active
  • :visited
  • :focus
a {
  color: #0077cc; /* 默認鏈接顏色 */
  text-decoration: none; /* 去除下劃線 */
}

a:hover {
  color: #004466; /* 滑鼠懸停時改變顏色 */
}

a:active {
  color: #ff0000; /* 點擊時改變顏色 */
}

a:visited {
  color: #551a8b; /* 定義已訪問鏈接的樣式 */
}

a:focus {
  outline: 2px solid #0077cc; /* 添加焦點輪廓 */
}

按鈕樣式:

按鈕是網站上非常重要的互動元素。
CSS允許設計人員為按鈕設計精緻而引人入勝的外觀。
包括懸停效果、過渡效果和自定義游標可以增強視覺反饋，使按鈕更直觀且更具吸引力。

.button {
  background-color: #4caf50; /* 按鈕背景顏色 */
  color: #fff; /* 按鈕文字顏色 */
  padding: 10px 20px;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button:hover {
  background-color: #45a049; /* 滑鼠懸停時改變顏色 */
}