Question

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

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

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

$('#calendar').fullCalendar({
      defaultView: 'agendaDay',
      defaultDate: '2017-12-07',
      editable: true,
      selectable: true,
      eventLimit: true, // allow "more" link when too many events
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'agendaDay,agendaTwoDay,agendaWeek,month'
      },
      views: {
        agendaTwoDay: {
          type: 'agenda',
          duration: { days: 3 },

          // views that are more than a day will NOT do this behavior by default
          // so, we need to explicitly enable it
          //groupByResource: true

          //// uncomment this line to group by day FIRST with resources underneath
          groupByDate: true
        }
      }

上面的按钮是我页面上的唯一按钮，上面的代码如下，我希望黑色背景从下到上悬停，但不是 - 为什么？

修改：

[预览链接到页面] [2]

Answer 1

您不必将伪元素与输入标记（https://github.com/ninject/Ninject.Extensions.Conventions）一起使用。考虑在容器上添加伪元素。同时删除输入的背景。它需要是透明的，这样你才能看到伪元素背后的效果。

以下是一个例子：

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

Answer 2

输入不支持::before ::after您可以使用 <Button>

比添加:: before :: after。

LIke https://jsfiddle.net/ufL55gfw/1/

Answer 3

尝试以下

$I->sendAjaxPostRequest('/backstage/ajax/media_upload/',
    array('folder' => 'rfold', 'name' => 'velo.jpg', 'filename' => 'velo.jpg'));

 .slider-button {
  margin-top: 70px;
}

@media (max-width: 1220px) {
.slider-button {
    margin-top: 30px;
  }
}

.slider-button .button {
  text-align: left;
}

@media (max-width: 1220px) {
.slider-button .button {
    text-align: center;
  }
}
.slider-button .button {
    text-align: left;
}
.button {
  text-align: center;
}


.button a{text-decoration:none;}
.button__item {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 1.313rem;
  line-height: 1em;
  color: #333333;
  letter-spacing: 0;
  background: #fff336;
  padding: 32.5px 65px;
  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;
}

.button__item:hover {
  text-decoration: none;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.button__item:hover:after {
  height: 100%;
}

.button__item:after {
  content: "";
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: -1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

按钮不起作用时，从底部到顶部的悬停过渡

3 个答案: