30天打造品牌特色电商网站 Day.15 微互动设计按钮实作(1)

网站的各种按钮及动态互动是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 能让输入框变成不同形式，下面介绍常见的几项：

文字输入框
单纯的文字输入框。
单选框
圆圆的点选框，一个群组只能选择一个，以 name 属性相同的为一个群组。
多选框
正方形的多选框，可以分开点选互不影响。
搜寻框
跟文字输入框不一样的是，最右边有删除全部文字的按钮！
日期选择框
能够选择日期。
密码框
能够隐藏输入的文字。

除次之外，有没有注意 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;
}