Question

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

实际按钮<button>
从<input type="submit">

我正在尝试创建按钮，在悬停时，按此执行：

＆＃13;

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

＆＃13;

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

＆＃13;

正如您所看到的，在悬停时，黑色面板从下到上。我已经成功实现了<input type="submit">按钮，但我似乎无法模仿<button>的相同美学：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

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

＆＃13;

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

＆＃13;

<div class="hs_submit">
  <div class="actions">
    <button class="hs-button primary large">DOWNLOAD NOW</button>
  </div>
</div>

＆＃13;

Answer 2

＆＃13;

.cta-wrapper{
    background-color: #fff336;  
  font-size: 16px;
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  line-height: 1em;
  color: #333333;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
  cursor: pointer;
  z-index:1;
}
.cta-text{
  display:inline-block;
  position:relative;
}
.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-text:hover button {
    border: 3px solid #000;
    color: white;
    background:transparent;
}
.cta-text:before {
  content: "";
  background: #000;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: -1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.cta-text:hover::before {
  height:100%;
}
span{
  font-family: 'Raleway', sans-serif;
}

＆＃13;

<button>的动画悬停状态不按预期工作

2 个答案: