鼠标悬停在按钮上的动画转换

时间：2017-12-21 12:47:26

标签： php jquery wordpress

我有一个按钮，背景为白色，边框为2px。在:hover事件中，我创建了一个到彩色背景的过渡，但是当鼠标移出时，背景会立即闪烁为白色，而不是平滑地动画回白色。

我错过了什么？

html input[type="button"],
.form-submit input[type="submit"] {
  margin: 10px 5px 10px 5px;
  -webkit-appearance: button;
  cursor: pointer;
  font-family: Aktiv-Grotesk, Verdana, Geneva, sans-serif;
  font-weight: normal;
  font-size: 13px;
  padding: 9px 15px;
  text-transform: uppercase;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  box-shadow: none;
  cursor: pointer;
  border: 2px solid #ff2e54;
  ;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  color: #ff2e54;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  letter-spacing: 1px;
  background: #fff;
  -webkit-transition: all 0.3s cubic-bezier(0, 0, 0, 0);
  -moz-transition: all 0.3s cubic-bezier(0, 0, 0, 0);
  -o-transition: all 0.3s cubic-bezier(0, 0, 0, 0);
  transition: all 0.3s cubic-bezier(0, 0, 0, 0);
}

html input[type="button"]:hover,
.form-submit input[type="submit"]:hover {
  background: rgba(255, 45, 84, 1);
  background: -moz-linear-gradient(left, rgba(255, 45, 84, 1) 0%, rgba(255, 12, 72, 1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 45, 84, 1)), color-stop(100%, rgba(255, 12, 72, 1)));
  background: -webkit-linear-gradient(left, rgba(255, 45, 84, 1) 0%, rgba(255, 12, 72, 1) 100%);
  background: -o-linear-gradient(left, rgba(255, 45, 84, 1) 0%, rgba(255, 12, 72, 1) 100%);
  background: -ms-linear-gradient(left, rgba(255, 45, 84, 1) 0%, rgba(255, 12, 72, 1) 100%);
  background: linear-gradient(to right, rgba(255, 45, 84, 1) 0%, rgba(255, 12, 72, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff2d54', endColorstr='#ff0c48', GradientType=1);
  border: 2px solid rgba(255, 255, 255, 0);
  color: #fff;
  -webkit-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  -moz-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  -o-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
}

html input[type="button"]:active,
.form-submit input[type="submit"]:active {
  border: 2px solid #ff607f;
  background: #ff607f!important;
  color: #eee;
  -webkit-box-shadow: 0px 1px 1px 0px #c12140;
  -moz-box-shadow: 0px 1px 1px 0px #c12140;
  -o-box-shadow: 0px 1px 1px 0px #c12140;
  box-shadow: 0px 1px 1px 0px #c12140;
}

html input[type="button"]:disabled,
.form-submit input[type="submit"]:disabled {
  -webkit-transition: all .2s ease-in-out 2s;
  -moz-transition: all .2s ease-in-out 2s;
  -o-transition: all .2s ease-in-out 2s;
  transition: all .2s ease-in-out 2s;
  cursor: default;
  background-color: #fff;
  border: 2px solid #E1E1E1;
  color: #BBB;
  box-shadow: none;
}
<input value="Download" type="button" onclick="this.disabled=true; this.value='Starting..';location.href='#'">

2 个答案:

答案 0 :(得分：1)

据我所知，背景渐变不支持过渡，所以你必须摆脱渐变（这很难看到）然后它起作用：

＆＃13;
＆＃13; 
html input[type="button"],
.form-submit input[type="submit"] {
  margin: 10px 5px 10px 5px;
  -webkit-appearance: button;
  cursor: pointer;
  font-family: Aktiv-Grotesk, Verdana, Geneva, sans-serif;
  font-weight: normal;
  font-size: 13px;
  padding: 9px 15px;
  text-transform: uppercase;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  box-shadow: none;
  cursor: pointer;
  border: 2px solid #ff2e54;
  ;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  color: #ff2e54;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 1);
 
  -webkit-transition: all 0.3s cubic-bezier(0, 0, 0, 0);
  transition: all 0.3s cubic-bezier(0, 0, 0, 0);
}

html input[type="button"]:hover,
.form-submit input[type="submit"]:hover {
  background: rgba(255, 45, 84, 1);


  border: 2px solid rgba(255, 255, 255, 0);
  color: #fff;
  -webkit-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
}

html input[type="button"]:active,
.form-submit input[type="submit"]:active {
  border: 2px solid #ff607f;
  background: #ff607f!important;
  color: #eee;
  -webkit-box-shadow: 0px 1px 1px 0px #c12140;
  -moz-box-shadow: 0px 1px 1px 0px #c12140;
  -o-box-shadow: 0px 1px 1px 0px #c12140;
  box-shadow: 0px 1px 1px 0px #c12140;
}

html input[type="button"]:disabled,
.form-submit input[type="submit"]:disabled {
  -webkit-transition: all .2s ease-in-out 2s;
  -moz-transition: all .2s ease-in-out 2s;
  -o-transition: all .2s ease-in-out 2s;
  transition: all .2s ease-in-out 2s;
  cursor: default;
  background-color: #fff;
  border: 2px solid #E1E1E1;
  color: #BBB;
  box-shadow: none;
}
＆＃13; 
<input value="Download" type="button" onclick="this.disabled=true; this.value='Starting..';location.href='#'">
＆＃13;
＆＃13;
＆＃13;

如果您仍想要渐变，则应查看gradient-position属性的转换 - 检查this answer。

答案 1 :(得分：1)

我把你的CSS剥了一下......然后就可以了。

我不认为浏览器喜欢所有的渐变属性，它的影响很小，是否有必要？

input[type="button"] {
  margin: 10px 5px 10px 5px;
  -webkit-appearance: button;
  cursor: pointer;
  font-family: Aktiv-Grotesk, Verdana, Geneva, sans-serif;
  font-weight: normal;
  font-size: 13px;
  padding: 9px 15px;
  text-transform: uppercase;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  box-shadow: none;
  cursor: pointer;
  border: 2px solid #ff2e54;
  ;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  color: #ff2e54;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  letter-spacing: 1px;
  background: #fff;
  transition: 0.3s;
}

input[type="button"]:hover {
  background: rgba(255, 45, 84, 1);
  border: 2px solid rgba(255, 255, 255, 0);
  color: #fff;
  -webkit-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  -moz-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  -o-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
}

html input[type="button"]:active {
  border: 2px solid #ff607f;
  background: #ff607f!important;
  color: #eee;
  -webkit-box-shadow: 0px 1px 1px 0px #c12140;
  -moz-box-shadow: 0px 1px 1px 0px #c12140;
  -o-box-shadow: 0px 1px 1px 0px #c12140;
  box-shadow: 0px 1px 1px 0px #c12140;
}

html input[type="button"]:disabled,
.form-submit input[type="submit"]:disabled {
  -webkit-transition: all .2s ease-in-out 2s;
  -moz-transition: all .2s ease-in-out 2s;
  -o-transition: all .2s ease-in-out 2s;
  transition: all .2s ease-in-out 2s;
  cursor: default;
  background-color: #fff;
  border: 2px solid #E1E1E1;
  color: #BBB;
  box-shadow: none;
}

你可以看到它在这个小提琴中起作用：https://jsfiddle.net/nvqukp3L/1/

相关问题
最新问题