透明按钮叠加图片后超链接下划线的移除方法咨询

问题根源 #

你看到的蓝色小线条是浏览器默认给获得焦点的按钮添加的outline样式，用来标记当前元素处于焦点状态，属于浏览器默认行为。

快速解决 #

在你的CSS的button规则里添加outline: none;即可移除这条线条：

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none; /* 移除默认焦点轮廓 */
}

可选：兼顾可访问性的优化 #

完全移除焦点轮廓会影响键盘导航用户的体验，建议补充自定义焦点样式，比如：

button:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); /* 自定义白色焦点环 */
}

额外HTML结构优化 #

你的代码里<a>直接包裹<li>的写法不符合HTML规范（<ul>的直接子元素必须是<li>），建议调整结构，把<a>放到<li>内部，甚至可以去掉冗余的<button>，直接用<a>包裹图片，更简洁合规：

<!-- 修改后的社交链接部分 -->
<ul>            
    <li>
        <a href="https://zincodrone.tumblr.com/">
            <img id="tumblr" src="../images/tumblr.png">
        </a>
    </li>
    <li>
        <img id="discord" src="../images/discord.png">
    </li>
</ul>

如果改用<a>，同样可以移除它的默认焦点轮廓：

a:focus {
    outline: none;
    /* 可选添加自定义焦点样式 */
}

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