網站的各種按鈕及動態互動是UX使用者經驗最直接接觸的地方，透過設計能讓使用者直覺操作，也能帶來良好的購物體驗！
這裡針對幾個常見的元件來做各項應用介紹！

往各個頁面的連結

預設的 <a> 大部分是藍色、有下底線，可以透過color和text-decoration來取消預設

<a href="">商品列表</a>

a{
	font-size:14px;
  font-weight:600;
  color:#051124;
  text-decoration:none;
}

除此之外，也可以新增滑鼠移過的效果

a:hover{
	color:#30a7cf;
  text-decoration:underline; /* 把底線加回來 */
}

除了在導覽列可以使用之外，如果想要放上粉絲專頁、line官方網站等連結，可以這樣做！

（ 範例使用bootstrap提供的icon，複製Copy HTML 裡的字串，放到HTML中適當的 tag 裡 ）

<a href="#" class="facebookBtn d-flex align-items-center justify-content-center text-white">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
    <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
    </svg><span class="ms-2">Facebook</span>
</a>

.facebookBtn{
  width:120px;
  height:36px;
  color:#ffffff;
  background-color:#3B5998;
  text-decoration:none;
}
.facebookBtn:hover{
  background-color:#1263cc;
}

輸入框 input

從最重要的搜尋，到各個數量框、會員填寫等，就換成 input 扮演非常重要的角色！
大家也可以參考使用Bootstrap的表格範例，讓表格漂亮起來～

/* class 裡是 Bootstrap提供的css */
<label for="Input1" class="form-label">名字</label>
<input type="text" class="form-control" id="Input1" 
placeholder="請輸入...">

其中 label 的 for 指向 input 的 id，這代表點擊文字就會觸發輸入框可以輸入。
label 和 input 的 class 是 Bootstrap 的 css樣式，當然也可以自己做更改。
placeholder 是輸入框預設的文字，當你輸入其他文字，預設才會消失。
input 的 type 能讓輸入框變成不同形式，下面介紹常見的幾項：

1. 文字輸入框
   單純的文字輸入框。
2. 單選框
   圓圓的點選框，一個群組只能選擇一個，以 name 屬性相同的為一個群組。
3. 多選框
   正方形的多選框，可以分開點選互不影響。
4. 搜尋框
   跟文字輸入框不一樣的是，最右邊有刪除全部文字的按鈕！
5. 日期選擇框
   能夠選擇日期。
6. 密碼框
   能夠隱藏輸入的文字。

除次之外，有沒有注意 input 框在輸入時，有外圍一圈光芒的感覺？
那是瀏覽器預設，當焦點 focus-visible 在這時，會有 outline 外圍陰影的效果。
我們可以自己手動改掉！

<label for="Input" class="labelStyle">不一樣的輸入框</label>
<input type="text" class="inputStyle" id="Input" placeholder="請輸入...">

.labelStyle{
  color:#0a8c72;
}
.inputStyle{
  height:40px;
  border-radius:4px;
  color:#0fd4ac;
  border:#0fd4ac 1px solid;
}
.inputStyle:focus-visible{
  box-shadow:#0fd4ac 0px 0px 4px 0px;
  outline:none;
}

除了以上能夠提供使用者反饋，還有其他可以展現小心思的地方，明天會再來繼續告訴大家！

今日範例連結：https://codepen.io/aavlice/pen/BaZMmJK