如何为按钮设置全红色填充并移除内部锚点a标签的下划线

实现方案 #

你当前的代码未覆盖按钮默认样式，也没有清除a标签自带的下划线效果，按下面修改即可达到需求：

方案1：保留原有button嵌套a的结构

调整后CSS代码

/* 按钮红色填充基础样式 */
button {
  display: block;
  width: 100%;
  border: none;
  background-color: red;
  padding: 5px 15px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}
/* 清除a标签下划线，统一文字样式 */
button a {
  color: #ffffff;
  text-decoration: none;
  /* 让链接铺满整个按钮，点击区域更大 */
  display: block;
  width: 100%;
}

/* 如果你的block类有其他动态逻辑，也可以单独给block类加样式，替换上面的button a规则 */
[class^="block"] {
  color: #ffffff;
  text-decoration: none;
  display: block;
  width: 100%;
}

调整后HTML代码

<td><button><a href="/update_ocr/{{ row.0 }}" class="block{{row.3}}" value="{{row.3}}">OCR</a></button></td>

方案2（更推荐）：去掉button标签，直接用a标签模拟按钮

避免按钮嵌套链接的潜在交互兼容问题，代码更简洁：

.block0 {
  display: block;
  width: 100%;
  border: none;
  background-color: red;
  padding: 5px 15px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  /* 避免padding撑宽按钮 */
  box-sizing: border-box;
}

<td><a href="/update_ocr/{{ row.0 }}" class="block{{row.3}}" value="{{row.3}}">OCR</a></td>

效果预览：

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