# CSS 22. anchor tag styling 範例 - 製作超連結

- 增加一個 a 標籤:

// survey - 譯: 民意調查

// 設定資料絕對路徑: ./xxxx.html

<a class="survey" href="./myForm.html">熊貓問卷調查</a>

// css

.survey {
  background-color: cornflowerblue;
  color: cornsilk;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
}


---

### 加入 :hover，產生使用者互動體驗效果:

// css 當滑鼠移動過去時，背景顏色變成 darkblue

.survey:hover {
  background-color: darkblue;
}

- [範例](https://codepen.io/rrpaqjcq/pen/wvXdxax)

###### tags: `2022 網頁開發全攻略教程 / CSS篇章 - other`