为什么input[type=submit]无法实现锚点标签同款动画？如何适配样式？

问题核心原因 #

<input type="submit"> 是替换元素，不支持嵌套子标签，你原有样式中针对.bttn-txt、.learn-more-arrow的子元素选择器规则对input完全无效，同时你把input对应的箭头元素放在了input标签外，hover状态无法联动，因此动画无法触发。

推荐解决方案（兼容性最好、改动最小） #

直接用<button type="submit">替换input提交按钮，button支持嵌套子元素，和锚点标签结构完全对齐，表单提交功能和input完全一致，是当前业内的主流实现方案。

修改后代码 #

HTML部分

<div class="container">
  <!-- 替换input为button，提交功能完全一致 -->
  <button type="submit" class="nextiva-bttn-anim nextiva-blue-bttn light">
    <span class="bttn-txt">Input Tag</span>
    <img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow"> 
  </button>

  <a href="#" class="nextiva-bttn-anim nextiva-blue-bttn light">
    <span class="bttn-txt">Anchor Tag</span>
    <img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow"> 
  </a>
</div>

CSS补充部分

在原有CSS的重置区域新增以下代码，清除button默认样式即可，原有样式不需要调整：

button {
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
}

可选方案：保留input提交按钮的实现 #

如果必须使用<input type="submit">，可以通过伪元素模拟箭头、padding控制文字位移实现同款效果：

修改后代码 #

HTML部分

移除input外单独放置的箭头元素：

<div class="container">
  <input type="submit" class="nextiva-bttn-anim nextiva-blue-bttn light" value="Input Tag">

  <a href="#" class="nextiva-bttn-anim nextiva-blue-bttn light">
    <span class="bttn-txt">Anchor Tag</span>
    <img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow"> 
  </a>
</div>

CSS补充部分

新增input专属动画规则：

input[type=submit].nextiva-bttn-anim {
  position: relative;
  padding-left: 20px;
  transition: padding-left 0.15s;
}
input[type=submit].nextiva-bttn-anim:hover {
  padding-left: 0;
}
input[type=submit].nextiva-bttn-anim::after {
  content: "";
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  background: url("https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg") no-repeat center / contain;
  opacity: 0;
  transition: opacity 0.15s;
}
input[type=submit].nextiva-bttn-anim:hover::after {
  opacity: 1;
}

该方案的局限性在于伪元素样式调整需要修改CSS，灵活度低于button方案，部分老旧浏览器对input伪元素的支持存在差异。

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