<button>悬停动画异常，求与<input type="submit">一致的实现方案

我来帮你拆解问题并给出针对性的解决方案～

为什么无法复刻的效果？ #

你给<input type="submit">实现的“黑色从下往上填充”效果，核心逻辑是借助父容器.actions的:before伪元素：

• 伪元素默认高度为0，隐藏在按钮下方
• hover时伪元素高度变为100%，同时把input的背景设为透明，让伪元素的黑色“透出来”，模拟填充动画

但你的代码是直接修改自身的background-color，这是直接替换背景色，没有“底层元素展开覆盖”的过渡逻辑，自然没法实现相同的填充效果。另外，<input>确实不支持:before/:after伪元素，但<button>是支持的，这也是我们可以利用的点。

---

方案1：复用的父容器逻辑（无需改动核心CSS） #

如果想和用完全一致的实现逻辑，只需要给

套上相同的.actions容器即可：

修改后的HTML结构 #

<div class="cta-wrapper">
  <div class="cta-image"></div>
  <div class="cta-text">
    <p>
      <!-- 给button添加.actions父容器 -->
      <div class="actions">
        <button>Download</button>
      </div>
    </p>
  </div>
  <a class="cta-link" href="#"></a>
</div>

调整后的CSS #

/* 复用你已经写好的.actions伪元素样式，不用改 */
.actions { display:inline-block; position:relative; }
.actions:before { content: ""; background: #000; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; z-index:0; -webkit-transition: 0.3s; transition: 0.3s; }
.actions:hover::before { height:100%; }

/* 调整button的基础样式，确保它在伪元素上方 */
.cta-text .actions button {
  -webkit-appearance: none;
  width: 179px;
  max-width: 100%;
  border: 2px solid #fff336;
  color: #000;
  background-color: #fff336;
  font-size: 16px;
  font-family: 'Calibri W01 Regular_904604';
  font-weight:400;
  line-height: 1em;
  padding: 11px 0 12px;
  box-sizing: border-box;
  cursor: pointer;
  /* 关键：让button在伪元素上层 */
  position: relative;
  z-index: 1;
}

/* hover时把button背景设为透明，露出下方伪元素 */
.cta-wrapper:hover .cta-text .actions button {
  background: transparent;
  color: #fff336;
  border: 3px solid #000;
}

---

方案2：利用

支持伪元素的特性（无需修改HTML） #

如果你不想改动HTML结构，直接在

自身上使用伪元素即可（毕竟不支持，但支持）：

调整后的CSS #

.cta-text button {
  -webkit-appearance: none;
  width: 179px;
  max-width: 100%;
  border: 2px solid #fff336;
  color: #000;
  background-color: #fff336;
  font-size: 16px;
  font-family: 'Calibri W01 Regular_904604';
  font-weight:400;
  line-height: 1em;
  padding: 11px 0 12px;
  box-sizing: border-box;
  cursor: pointer;
  /* 关键设置：让伪元素相对于button定位，溢出隐藏 */
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* 给button添加内部伪元素作为黑色背景层 */
.cta-text button:before {
  content: "";
  background: #000;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: -1; /* 放在文字下方 */
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
}

/* hover时展开伪元素高度，实现填充效果 */
.cta-wrapper:hover .cta-text button:before {
  height: 100%;
}

/* hover时调整文字和边框样式 */
.cta-wrapper:hover .cta-text button {
  color: #fff336;
  border: 3px solid #000;
  /* 这里不需要改background，伪元素会在下方覆盖黄色背景 */
}

---

两种方案都能实现你想要的“黄色背景保留，黑色从下往上填充”的效果，你可以根据是否愿意修改HTML结构来选择～

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