Button disappearing briefly on hover - html

Question

I have never run into this issue before. My input/button disappears for a brief moment when I hover over it.
Does anyone know why this would happen?
.button {
padding: 10px 12px;
border: 1px solid #BE1E2D;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
color: #FFF;
background: linear-gradient(to bottom right, #BE1E2D, #981824);
text-transform: uppercase;
text-decoration: none;
transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;
cursor: pointer;
}
.button:hover {
background: #BE1E2D;
transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;
}
<input type="submit" value="Submit" class="button">

Answer 1

THIS POST IS FOR REFERENCE ONLY
As Turnip stated; the issue is that you're apply a transition: onto a gradient background so the background needs to be reset from null the first time the transition is effected.
You do not need to set a transition in the :hover state.
There's no need for transition all; only set transitons on the elements you actually want to change.
Removing the gradient issue (commented out) solves the problem.
You seem to have syntax issue: to right bottom is the correct syntax; not "to bottom right" it is [left|right] [top|bottom]
Therefore your question is an exact duplicate of Use CSS3 transitions with gradient backgrounds
Slowing down the transition and increasing the colour differences for clarity below:
.button {
padding: 10px 12px;
border: 1px solid #BE1E2D;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
color: #FFF;
background: #981824;
/*background: linear-gradient(to right bottom, #BE1E2D, #99CC55);*/
text-transform: uppercase;
text-decoration: none;
transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
cursor: pointer;
}
.button:hover {
/*background: #BE1E2D;*/
background: #99CC55;
}
<input type="submit" value="Submit" class="button">
And with Gradients,
Partial Answer:
After my various fixes, now after the first instance where it loads from white, the gradient transition works correctly (on more Firefox) :
.button {
padding: 10px 12px;
border: 1px solid #BE1E2D;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
color: #FFF;
background: linear-gradient(to right bottom, #BE1E2D, #99CC55);
text-transform: uppercase;
text-decoration: none;
transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
cursor: pointer;
}
.button:hover {
background: #BE1E2D;
}
<input type="submit" value="Submit" class="button">