怎么制作HTML按钮？交互设计新手指南-html教程-PHP中文网

怎么制作HTML按钮？交互设计新手指南

絕刀狂花

发布： 2025-06-29 14:03:01

原创

438人浏览过

制作html按钮主要有三种方式：使用<button>标签、<input type="button">标签或<a>标签模拟按钮；推荐使用<button>标签，语义化最佳，配合css可自定义样式及交互效果；使用disabled属性可实现禁用状态，并通过css和javascript增强视觉反馈与动态控制；带图标的按钮可通过字体图标（如font awesome）、svg图标或图片实现，其中字体图标和svg更推荐使用；为确保按钮在不同浏览器显示一致，可引入css reset或normalize.css统一默认样式。

怎么制作HTML按钮？交互设计新手指南

制作HTML按钮，其实就是用HTML、CSS，可能还会加一点JavaScript，让按钮看起来美观，用起来顺手。

解决方案

制作HTML按钮，主要有三种方式：使用<button>标签，使用<input type="button">标签，或者用<a>标签模拟按钮。

立即学习“前端免费学习笔记（深入）”；

<button>标签： 这是最推荐的方式，语义化最好。

<button type="button">点击我</button>

登录后复制

type="button"很重要，可以防止在<form>表单中意外提交。

接下来就是CSS美化了，可以自定义按钮的颜色、边框、字体等等。

button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

登录后复制

<input type="button">标签： 这种方式比较老，但也能用。
```
<input type="button" value="点击我">
```
登录后复制
CSS美化和<button>标签类似，但<input>标签有些默认样式不太好改，比如边框。

<a>标签： 这种方式其实是用链接模拟按钮，需要用CSS来调整。

<a href="#" class="button">点击我</a>

登录后复制

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: #3e8e41;
}

登录后复制

display: inline-block很重要，让<a>标签像按钮一样可以设置宽高。
text-decoration: none去掉链接的下划线。

添加交互效果，就需要用到JavaScript了。

<button type="button" onclick="myFunction()">点击我</button>

<script>
function myFunction() {
  alert("你点击了按钮！");
}
</script>

登录后复制

onclick事件监听器，点击按钮时执行myFunction()函数。
更复杂的交互，可以使用addEventListener，这样可以更灵活地管理事件。

如何让HTML按钮在不同浏览器上显示一致？

不同浏览器对HTML元素的默认样式处理可能不一样，导致按钮在不同浏览器上看起来略有差异。解决这个问题，可以使用CSS Reset或者Normalize.css。

CSS Reset： 彻底清除所有元素的默认样式，然后自己定义。比较激进，但可以完全掌控。

创客贴设计
创客贴设计，一款智能在线设计工具，设计不求人，AI助你零基础完成专业设计！

51

查看详情
Normalize.css： 在保留有用的默认样式基础上，统一不同浏览器的差异。更温和，推荐使用。

具体使用方法，就是把CSS Reset或者Normalize.css的代码引入到你的CSS文件中。

<head>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="style.css">
</head>

登录后复制

如何制作一个禁用状态的HTML按钮？

禁用状态的按钮，通常需要视觉上有所区分，并且点击后没有任何反应。

HTML： 使用disabled属性。

<button type="button" disabled>禁用按钮</button>

登录后复制

CSS： 修改样式，让用户知道按钮是禁用的。
```
button:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}
```
登录后复制
- cursor: not-allowed表示禁止点击。
- 可以调整背景颜色和文字颜色，使其看起来变灰。

JavaScript： 可以通过JavaScript动态控制disabled属性。

<button type="button" id="myButton">点击禁用</button>

<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  button.disabled = true;
});
</script>

登录后复制

如何制作一个带图标的HTML按钮？

带图标的按钮，可以增加按钮的辨识度，提升用户体验。

使用字体图标： 比如Font Awesome或者iconfont。

先引入字体图标库的CSS文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

登录后复制

然后在按钮中使用对应的HTML代码。
```
<button type="button"><i class="fas fa-download"></i> 下载</button>
```
登录后复制
- <i class="fas fa-download"></i>就是Font Awesome的下载图标。

使用SVG图标： SVG图标可以无损缩放，清晰度更高。

可以直接在HTML中嵌入SVG代码。

<button type="button">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
    <path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
  </svg>
  下载
</button>

登录后复制