按钮

Introduction

. 除了可以使用 <input> 的特定 type 实现按钮功能外，还可以直接使用 <button>

<button type="">button text</button>

按钮类型
类别	说明
submit	提交表单数据 form data 到服务器 server；默认类型
reset	清除表单数据；表单重置
button	无默认行为，仅仅是一个按钮；用于添加用户自定义事件

<form action="" method="get" name="demo" onsubmit='return false'>
  <input type="text" name="uname" id="">
  <input type="text" name="upass" id="">
  <button type="submit">button text</button>
  <button type="reset">button text</button>
</form>

Initialization

. 默认情况下，按钮并没有显著的鼠标交互提示

. 实际开发请以需求为准

. 通常初始化如下

button {
  border: none;
  outline: none;
  background-color: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

Usage

. 一个作品内，按钮的样式应该统一

. 通常先指定公共/基类样式，再指定专有样式

. 更多样式，请访问 BonBon、按钮设计

公共样式

// 公共静态样式
button {
  padding: 6px 30px;
  color: #fff;
  background-size: 200%;
  border-radius: 6px;
  text-transform: capitalize;
  transition: 0.4s;
}

// 公共动态交互样式
button:hover {
  background-position: right center;
}

专有样式：不同部分的按钮，分配不同的类，每个类使用不同的设计即可

[] 按钮设计

使用背景颜色区分；简单颜色、渐变颜色

.normal-btn {
  background-color: #ccc;
}

.warn-btn {
  background-color: #F40;
}

.more-btn {
  background-image: linear-gradient(90deg, #26de81, #20bf6b);
}

.form-btn {
  background-image: linear-gradient(90deg, #3498db, #2980b9);
}

.close-btn {
  background-image: linear-gradient(90deg, #f39c12, #e74c3c);
}

使用透明度 opacity

使用变量 - variable

使用滤镜 - filter

使用过渡动画 transition

Summary & Homework

Summary: . <button> 的使用; . <button> 样式的设计; . 初步使用渐变背景
Homework: . 使用 <button> 元素完善个人网站的留言板或信息采集表的设计