input[type="submit"]按钮hover样式及过渡效果失效求助

请问有人能帮我分析为何input[type="submit"]元素的CSS样式无法正确生效？我需要通过CSS实现平滑过渡效果，但该样式未正常应用。

HTML代码片段 #

<input type="submit" value="Submit" />

原CSS代码 #

input[type="submit"] {
  background: #fff; 
  color: #4741d7;
  border: 2px solid #4741d7; 
  padding: 16px 20px;
  border-radius: 3px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
  font-size: large;
  letter-spacing: 12px;
}
input[type="submit"]:hover {
  color: #fff;
}
input[type="submit"]::after {
  content: "";
  background-color: #4741d7; 
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: scale(0, 0) rotate(-180deg);
  transition: all 0.3s ease;
}
input[type="submit"]:hover::after {
  transition: all 0.3s ease-out;
  transform: scale(1, 1) rotate(0deg);
}

问题分析 #

• input伪元素支持限制：<input>属于替换元素，部分浏览器不支持为其添加::after/::before伪元素——这类元素没有内部内容容器，伪元素无法被正常渲染。
• 冗余padding干扰布局：伪元素已通过left:0;right:0;top:0;bottom:0;占满容器，额外添加padding:16px 20px会导致伪元素超出容器范围，破坏过渡效果。
• 过渡规则重复定义：在hover状态下重新声明过渡属性，可能导致动画起始状态混乱，引发效果异常。

修复方案 #

方案1：改用button元素（推荐）

将<input type="submit">替换为<button type="submit">Submit</button>，button元素对伪元素的支持更完善，仅需修改CSS选择器即可：

<button type="submit">Submit</button>

button[type="submit"] {
  background: #fff; 
  color: #4741d7;
  border: 2px solid #4741d7; 
  padding: 16px 20px;
  border-radius: 3px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
  font-size: large;
  letter-spacing: 12px;
}
button[type="submit"]:hover {
  color: #fff;
}
button[type="submit"]::after {
  content: "";
  background-color: #4741d7; 
  position: absolute;
  z-index: -1;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: scale(0, 0) rotate(-180deg);
  transition: all 0.3s ease;
}
button[type="submit"]:hover::after {
  transform: scale(1, 1) rotate(0deg);
}

方案2：保留input元素，调整过渡实现

如果必须使用input，可直接为元素本身添加背景色过渡，放弃伪元素方案：

input[type="submit"] {
  background: #fff; 
  color: #4741d7;
  border: 2px solid #4741d7; 
  padding: 16px 20px;
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  font-size: large;
  letter-spacing: 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
input[type="submit"]:hover {
  color: #fff;
  background-color: #4741d7;
}

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