怎么制作HTML按钮？交互设计新手指南-小浪学习网

制作html按钮主要有三种方式：使用

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

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

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

解决方案

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

制作HTML按钮，主要有三种方式：使用

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

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

这是最推荐的方式，语义化最好。

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

type=”button”很重要，可以防止在

表单中意外提交。

接下来就是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" value="点击我">
```
CSS美化和

标签： 这种方式其实是用链接模拟按钮，需要用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很重要，让标签像按钮一样可以设置宽高。
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： 彻底清除所有元素的默认样式，然后自己定义。比较激进，但可以完全掌控。
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>
```
- 就是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>