html - 的动画悬停状态无法按预期工作

Question

我正在创建的页面上有两种类型的按钮:

1. 实际按钮 <button>
2. 从 <input type="submit"> 创建的按钮

我正在尝试创建按钮，该按钮在悬停时执行如下操作:

.actions {
  display:inline-block;
  position:relative;
}
.hs-button {
    background-color: #fff336;
}
.hs-button {
    padding: 15px 20px 15px 20px;
  font-size: 16px;
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  line-height: 1em;
  color: #333333;
  letter-spacing: 0;
  border: 3px solid transparent;
  display: inline-block;
  position: relative;
  cursor: pointer;
  z-index:1;
}
.actions:hover input[type="submit"] {
    border: 3px solid #000;
    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>

如您所见，悬停时，黑色面板从下到上出现。我已经设法为 <input type="submit"> 实现了这一目标按钮，但我似乎无法为 <button> 效仿相同的美学:

.cta-wrapper .cta-text p button{
      border: 3px solid #fff336;
}
.thank-you .cta-wrapper {
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: relative;
    transition:all 0.3s;
}
.cta-text {
    background-color: #ba1974;
    padding:30px 30px 45px;
}
.cta-text {
    background-color: #474747;
}
.cta-wrapper .cta-link {
    position:absolute;
    display:block;
    height:100%;
    width:100%;
    top:0;
    left:0;
}
.cta-text p {
    font-size:16px;
    line-height:24px;
    font-weight:normal;
    font-family: 'Raleway', sans-serif;
    margin:0 auto 30px;
    color:#fff;
}
.cta-text p:last-child {
    margin-bottom:0;
}
.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;
    transition:all 0.25s;
}
.cta-wrapper:hover .cta-text button {
    background-color: #000;
    color:#fff336;
    border: 3px solid #000;
}
.cta-wrapper:hover .cta-text button p {
    color:#fff336;
}
 p.button:first-of-type a:hover {
  text-decoration: none;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

<div class="cta-wrapper">
    <div class="cta-image">
    </div>
    <div class="cta-text">
        <p><button>Download</button></p>
    </div>
    <a class="cta-link" href="#"></a>
</div>

1. 为什么不是 <button>表现像<input> ？
2. 对于 <input>按钮，当您将鼠标悬停在按钮上时，背景会变透明一秒钟，然后用黑色填充。我希望背景保持黄色，黑色在悬停时填充它。 我怎样才能做到这一点？我现在可以让悬停工作的唯一方法是设置 background作为transparent - 输入不支持和 :after所以我不知道如何解决这个问题？

Answer 1

好吧，就是这样，我没有看到你的问题......

.actions {
  display:inline-block;
  position:relative;
}
.hs-button {
    background-color: #fff336;
}
.hs-button {
    padding: 15px 20px 15px 20px;
  font-size: 16px;
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  line-height: 1em;
  color: #333333;
  letter-spacing: 0;
  border: 3px solid transparent;
  display: inline-block;
  position: relative;
  cursor: pointer;
  z-index:1;
}
.actions:hover button {
    border: 3px solid #000;
    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">
    <button class="hs-button primary large">DOWNLOAD NOW</button>
  </div>
</div>