按钮样式失效求助：无法自定义按钮外观（附代码）

浏览器自带的表单默认样式经常会坑到新手，你的按钮显示成带边框的白色矩形，大概率是默认样式没被重置导致的，试试下面的方案：

1. 先重置按钮默认样式 #

先清除浏览器给按钮加的默认边框、背景、内边距这些，避免它们干扰自定义样式：

button {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit; /* 继承父元素的字体设置，避免文字样式不一致 */
}

2. 自定义按钮样式 #

在重置基础上，添加你想要的外观，比如背景色、圆角、内边距这些：

.my-button {
  background-color: #2196F3;
  color: #fff;
  border-radius: 6px;
  padding: 10px 20px;
  border: 1px solid #1976D2;
  transition: background-color 0.2s ease;
}

.my-button:hover {
  background-color: #1976D2;
}

3. 确保HTML正确应用类 #

别忘给按钮加上自定义类：

<button class="my-button">我的按钮</button>

额外排查点 #

• 打开浏览器开发者工具（F12），切换到Elements面板，看按钮的样式有没有被划掉——如果有，说明有其他优先级更高的CSS覆盖了你的样式，调整选择器的优先级就行（比如用更具体的选择器，比如div .my-button）
• 检查CSS文件是不是真的引入到HTML里了，路径别写错
• 要是临时测试，可以加!important强制生效（比如background-color: #2196F3 !important;），但别长期用，尽量靠调整选择器解决优先级问题

内容的提问来源于stack exchange，提问作者Cheyenne