按钮详解
button vs input[type=submit]、type 属性、CSS 美化按钮
按钮详解
HTML 中 <button> 和 <input type="submit"> 都能创建按钮，但它们有本质区别。
学完本章你将： 掌握 button vs input、type 属性、CSS 美化。
button vs input
html
<!-- button 标签（推荐——更灵活） -->
<button type="submit">提交</button>
<button type="button">普通按钮</button>
<button type="reset">重置</button>
<!-- input 标签 -->
<input type="submit" value="提交">
<input type="button" value="点击" onclick="alert('Hello')">
<input type="reset" value="重置">| 对比 | ` | `` |
|---|---|---|
| 可以放 HTML | ✅ 图标+文字 | ❌ 纯文本 |
| 默认行为 | 取决于 type | 提交表单 |
| 伪元素 | ✅ ::before/::after | ❌ 不支持 |
| 推荐度 | ⭐⭐⭐ | ⭐ |
按钮美化
html
<style>
.btn {
padding: 10px 24px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.btn-primary { background: #4CAF50; color: white; }
.btn-primary:hover { background: #45a049; }
.btn-danger { background: #f44336; color: white; }
.btn-danger:hover { background: #da190b; }
.btn-outline {
background: transparent;
border: 2px solid #4CAF50;
color: #4CAF50;
}
.btn-outline:hover { background: #4CAF50; color: white; }
</style>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-outline">边框按钮</button>