如何将a链接标签设置为与带hover动效的自定义按钮外观完全一致

• 错误方案1：a标签内嵌button不符合HTML规范，交互元素嵌套会导致点击行为冲突，同时浏览器默认的button样式也会和自定义样式冲突，出现异常。
• 错误方案2：直接给a标签加类但未保留内部span结构：原CSS规则中.g2b-button span设置了z-index: 1，作用是让按钮文字层级高于hover动效的after伪元素，去掉span后文字会被伪元素遮挡，导致动效和文字显示异常。
• 未重置a标签默认样式：浏览器默认给a标签添加了下划线、默认文字颜色、移动端点击高亮等样式，会和自定义按钮样式冲突。

HTML结构 #

和原按钮结构完全对齐，保留内部span标签即可：

<a href="你需要的跳转链接" class="g2b-button" title="">
  <span>Hover me!</span>
</a>

CSS调整 #

在原有.g2b-button类的属性中，补充代码重置a标签默认样式，原有其他CSS代码完全不需要修改：

.g2b-button {
  /* 原有所有属性保留，新增以下内容 */
  text-decoration: none; /* 清除a标签默认下划线 */
  box-sizing: border-box; /* 保证盒模型计算规则和button元素完全一致 */
  -webkit-tap-highlight-color: transparent; /* 清除移动端点击时的默认高亮效果 */
}

调整完成后，a标签的外观、hover动效都会和原button完全一致，同时保留了链接跳转的原生特性。

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