Php 将鼠标悬停在按钮上设置过渡动画

我有一个按钮，背景是白色的，有两个边框。在

：hover

事件中，我创建了一个到彩色背景的过渡，但当鼠标退出时，背景立即闪烁为白色，而不是平滑地动画化为白色

我错过了什么

html输入[type=“button”]，
.表单提交输入[type=“submit”]{
保证金：10px 5px 10px 5px；
-webkit外观：按钮；
光标：指针；
字体系列：Aktiv Grotesk，Verdana，日内瓦，无衬线；
字体大小：正常；
字体大小：13px；
填充：9px 15px；
文本转换：大写；
-webkit框大小：内容框；
-moz框大小：内容框；
框大小：内容框；
盒影：无；
光标：指针；
边框：2px实心#ff2e54；
;
-webkit边界半径：40px；
边界半径：40px；
颜色：#ff2e54；
文本对齐：居中；
-o-text-overflow：剪辑；
文本溢出：剪辑；
字母间距：1px；
背景：#fff；
-webkit转换：所有0.3立方贝塞尔（0,0,0,0）；
-moz变换：所有0.3立方贝塞尔（0,0,0,0）；
-o过渡：所有0.3s三次贝塞尔（0,0,0,0）；
过渡：所有0.3立方贝塞尔（0,0,0,0）；
}
html输入[type=“button”]：悬停，
.form提交输入[type=“submit”]：悬停{
背景：rgba（255,45,84,1）；
背景：-moz线性梯度（左，rgba（255,45,84,1）0%，rgba（255,12,72,1）100%）；
背景：-webkit渐变（左上、右上、颜色停止（0%，rgba（255、45、84、1））、颜色停止（100%，rgba（255、12、72、1））；
背景：-webkit线性梯度（左侧，rgba（255,45,84,1）0%，rgba（255,12,72,1）100%）；
背景：-o-线性梯度（左，rgba（255,45,84,1）0%，rgba（255,12,72,1）100%）；
背景：-ms线性梯度（左侧，rgba（255,45,84,1）0%，rgba（255,12,72,1）100%）；
背景：线性梯度（向右，rgba（255,45,84,1）0%，rgba（255,12,72,1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ff2d54'，endColorstr='#ff0c48'，GradientType=1）；
边框：2倍实心rgba（255、255、255、0）；
颜色：#fff；
-网络工具包盒阴影：0px2px7px-1pxRGBA（255,45,85,0.5）；
-moz盒阴影：0px2px7px-1pxRGBA（255,45,85,0.5）；
-o形盒阴影：0px2px7px-1pxRGBA（255,45,85,0.5）；
盒影：0px2px7px-1pxRGBA（255,45,85,0.5）；
}
html输入[type=“button”]：活动，
.表单提交输入[type=“submit”]：活动{
边框：2个实心#ff607f；
背景：#ff607f！重要；
颜色：#eee；
-网络工具包盒阴影：0px 1px 0px#c12140；
-moz盒阴影：0px 1px 1px 0px#c12140；
-o形盒阴影：0px 1px 0px#c12140；
盒影：0px 1px 0px#c12140；
}
html输入[type=“button”]：已禁用，
.表单提交输入[type=“submit”]：禁用{
-webkit转换：所有.2轻松输入输出2；
-moz转换：所有.2缓进输出2；
-o型转换：所有.2输入输出2；
转换：所有.2缓进输出2；
游标：默认值；
背景色：#fff；
边框：2个实心#e1e1；
颜色：#BBB；
盒影：无；
}

---

据我所知，背景渐变不支持过渡，因此您必须去掉渐变（无论如何都很难看到），然后它才能工作：

html输入[type=“button”]，
.表单提交输入[type=“submit”]{
保证金：10px 5px 10px 5px；
-webkit外观：按钮；
光标：指针；
字体系列：Aktiv Grotesk，Verdana，日内瓦，无衬线；
字体大小：正常；
字体大小：13px；
填充：9px 15px；
文本转换：大写；
-webkit框大小：内容框；
-moz框大小：内容框；
框大小：内容框；
盒影：无；
光标：指针；
边框：2px实心#ff2e54；
;
-webkit边界半径：40px；
边界半径：40px；
颜色：#ff2e54；
文本对齐：居中；
-o-text-overflow：剪辑；
文本溢出：剪辑；
字母间距：1px；
背景：rgba（255，255，255，1）；
-webkit转换：所有0.3立方贝塞尔（0,0,0,0）；
过渡：所有0.3立方贝塞尔（0,0,0,0）；
}
html输入[type=“button”]：悬停，
.form提交输入[type=“submit”]：悬停{
背景：rgba（255,45,84,1）；
边框：2倍实心rgba（255、255、255、0）；
颜色：#fff；
-网络工具包盒阴影：0px2px7px-1pxRGBA（255,45,85,0.5）；
盒影：0px2px7px-1pxRGBA（255,45,85,0.5）；
}
html输入[type=“button”]：活动，
.表单提交输入[type=“submit”]：活动{
边框：2个实心#ff607f；
背景：#ff607f！重要；
颜色：#eee；
-网络工具包盒阴影：0px 1px 0px#c12140；
-moz盒阴影：0px 1px 1px 0px#c12140；
-o形盒阴影：0px 1px 0px#c12140；
盒影：0px 1px 0px#c12140；
}
html输入[type=“button”]：已禁用，
.表单提交输入[type=“submit”]：禁用{
-webkit转换：所有.2轻松输入输出2；
-moz转换：所有.2缓进输出2；
-o型转换：所有.2输入输出2；
转换：所有.2缓进输出2；
游标：默认值；
背景色：#fff；
边框：2个实心#e1e1；
颜色：#BBB；
盒影：无；
}

---

据我所知，背景渐变不支持过渡，因此您必须去掉渐变（无论如何都很难看到），然后它才能工作：

html输入[type=“button”]，
.表单提交输入[type=“submit”]{
保证金：10px 5px 10px 5px；
-webkit外观：按钮；
光标：指针；
字体系列：Aktiv Grotesk，Verdana，日内瓦，无衬线；
字体大小：正常；
字体大小：13px；
填充：9px 15px；
文本转换：大写；
-webkit框大小：内容框；
-moz框大小：内容框；
框大小：内容框；
盒影：无；
光标：指针；
边框：2px实心#ff2e54；
;
-webkit边界半径：40px；
边界半径：40px；
颜色：#ff2e54；
文本对齐：居中；
-o-text-overflow：剪辑；
文本溢出：剪辑；
字母间距：1px；
背景：rgba（255，255，255，1）；
-webkit转换：所有0.3立方贝塞尔（0,0,0,0）；
过渡：所有0.3立方贝塞尔（0,0,0,0）；
}
html输入[type=“button”]：悬停，
.form提交输入[type=“submit”]：悬停{
背景
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;
}