Button disappearing briefly on hover

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

You are transitioning the background from a gradient to a a solid colour. I would imagine this is the problem. Also, you don't need the transition on the `:hover` state. — Turnip, Mar 08 '18 at 17:31
Because if you take the snippet and remove the transition time the disappearing goes away. Can't really guess at how it works internally. — takendarkk, Mar 08 '18 at 17:36
@Turnip Would I change my background on my hover state to be a gradient, but use two of the same colors then? — Paul, Mar 08 '18 at 17:37
I re-deleted it because transitions don't work with background gradients. It's been a while since I've tried this :( — Turnip, Mar 08 '18 at 17:45
Possible duplicate of [Use CSS3 transitions with gradient backgrounds](https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds) — Martin, Mar 08 '18 at 17:49

Martin · Accepted Answer · 2018-03-08T17:56:52.923

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

Thank you. I wasn't aware that transitions would not work in this specific case. — Paul, Mar 08 '18 at 18:02
@Paul glad to help. Do give the linked Q&A a read as it has more details on this issue `:-)` — Martin, Mar 08 '18 at 18:25

Button disappearing briefly on hover

1 Answers1

Partial Answer: