如何使用CSS移除按钮外层链接的下划线？

首先，你遇到的下划线问题根源很明确：下划线来自包裹按钮的<a>标签，而不是按钮本身，你的CSS选择器写反了，所以完全没起到作用。

1. 快速修复当前代码 #

你的CSS里写了#Upgrade a，这是在找id="Upgrade"的元素内部的<a>标签，但实际结构是<a>包裹着id="Upgrade"的按钮，所以这个选择器根本匹配不到任何元素。

你需要直接给包裹按钮的<a>标签设置text-decoration:none，有两种简单方式：

方式一：给<a>标签加类（推荐，更精准） #

修改HTML：

<a href="upgrade.php" class="button-link"> 
  <input type="button" class="Buttons" id="Upgrade" value="Upgrade"> 
</a>

添加CSS：

.button-link {
  text-decoration: none;
}

方式二：用父选择器匹配（无需修改HTML） #

如果不想给<a>加类，可以用:has选择器匹配包含#Upgrade按钮的<a>标签：

a:has(#Upgrade) {
  text-decoration: none;
}

注意：:has选择器需要现代浏览器支持（目前Chrome、Firefox、Edge都已支持）。

2. 更规范的替代方案 #

其实用<a>包裹<input type="button">的写法在语义上并不规范（表单按钮和链接的语义混合了），更推荐的做法是直接用<button>元素，通过JS实现跳转：

修改HTML为：

<button class="Buttons" id="Upgrade" onclick="window.location.href='upgrade.php'">
  Upgrade
</button>

这样既不需要处理<a>标签的下划线问题，语义也更清晰，同时你原来的.Buttons和#Upgrade样式可以完全复用。

为什么之前用div/span包裹没用？ #

因为下划线是<a>标签的默认样式，你给div或span设置text-decoration:none并不会影响到它的父元素<a>的样式，必须直接针对<a>标签设置才能去掉下划线。

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