Animate transition on mouse over a button - php

Question

I have a button, and its background is white, with a 2px border. On :hover event, I created a transition to a colored background, but when the mouse is out, the background flashes to white immediately, instead of smoothly animates back to white.
What am I missing?
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='#'">

Answer 1

As far as a I know background gradients don't support transitions, so you have to get rid of the gradient (which is hard to see anyway) then it works:
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;
}
<input value="Download" type="button" onclick="this.disabled=true; this.value='Starting..';location.href='#'">
If you still want the gradient you should look into transition of gradient-position property - check this answer.

Answer 2

I stripped your CSS down a bit.. and then it works.
I don't think the browser likes all the gradient properties, the affect it pretty muted, is it necessary?
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;
}
You can see it working in this fiddle: https://jsfiddle.net/nvqukp3L/1/