<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>
button { border: none; outline: none; background-color: transparent; font: inherit; color: inherit; cursor: pointer; }
. 一个作品内,按钮的样式应该统一
. 通常先指定 公共/基类 样式,再指定 专有 样式
.更多样式,请访问 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); }