html - 按钮上从底部到顶部的悬停过渡不起作用

Question

我正在尝试模仿在 this page 上找到的按钮的悬停过渡。 .

到目前为止，我有以下内容:

.hs-button {
  font-size: 16px;
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  line-height: 1em;
  color: #333333;
  letter-spacing: 0;
  background: #fff336;
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
input[type="submit"]:hover {
  text-decoration: none;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}
input[type="submit"]:hover {
    border: 3px solid #000;
    background-color: #000;
    color: #fff336;
}
input[type="submit"]:hover:after {
  height: 100%;
}
input[type="submit"]:after {
  content: "";
  background: #000;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: -1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

<div class="hs_submit">
    <div class="actions">
      <input type="submit" value="DOWNLOAD NOW!" class="hs-button primary large">
    </div>
  </div>

上面的按钮是我页面上唯一的按钮，使用上面的代码，我希望它的黑色背景从下到上悬停，但事实并非如此 - 为什么？

编辑:

[预览页面链接][2]

Answer 1

您不必使用带有输入标签的伪元素 ( Can I use a :before or :after pseudo-element on an input field? )。考虑在容器上添加伪元素。同时删除输入的背景。它需要是透明的，这样你就可以看到后面伪元素的效果。

这是一个例子:

.actions {
  display:inline-block;
  position:relative;
}

.hs-button {
  font-size: 16px;
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  line-height: 1em;
  color: #333333;
  letter-spacing: 0;
  padding:20px;
  border:none;
  display: inline-block;
  position: relative;
  cursor: pointer;
  z-index:1;
}

.actions:hover input[type="submit"] {
    color: #fff336;
    background:transparent;
}

.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%;
}

<div class="hs_submit">
    <div class="actions">
      <input type="submit" value="DOWNLOAD NOW!" class="hs-button primary large">
    </div>
  </div>