按钮

<button>
概述 Overview
. 除了可以使用 <input> 的特定 type 实现按钮功能外,还可以直接使用 <button>
. 更多信息,请访问 MDN - <button>
<button type="">button text</button>
按钮类型
类别 说明
submit 提交表单数据 form data 到服务器 server;默认类型
reset 清除表单数据;表单重置
button 无默认行为,仅仅是一个按钮;用于添加用户自定义事件
使用 <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>
样式初始化 Init
. 通常初始化如下
. 默认情况下,按钮并没有显著的鼠标交互提示
. 实际开发请以需求为准
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);
}

[] 高级样式 - 使用 变量 - variable滤镜 - filter
总结与作业 Summary & Homework
总结 Summary
. <button> 的使用
. <button> 样式的设计
. 初步使用渐变背景
作业 Homework
. 使用 <button> 元素完善个人网站的留言板或信息采集表的设计