Gradient Button to background-color blinks on hover

Question

As you can see in the following snippet I have a button with a linear gradient background. In the hover I want change it to a single color. When I try this effect I am getting like a blink effect which the background disappears and then the background color appears. Is there any workarounds to prevent this blinking effect?

a {
  text-transform: uppercase;
  background-color: transparent;
  border-radius: 3px;
  padding: 5px 20px;
  -ms-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  background-image: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
  border: none;
  outline: none;
}

a:hover {
  background-image: none;
  background-color: #33afbd;
}

<a href="#">Button</a>

it's because you remove the image which in effect means to animate from transparent to your colour you could start the background colour as something in the middle of the gradient, then you wouldn't see a bllink (and also browsers that don't support gradients will have a fallback) — Pete, Feb 20 '19 at 14:42
@Pete thank you sir. But I want to mention that this is not a duplicate question since the question refereed to the duplicate doesn't have the answer for my question. It's about css animations using keyframes and transition issue sir. Thank you — Ramesh, Feb 20 '19 at 15:27
my point is you can't transition a gradient - you either have to do what I say in my previous comment or look at moving the background position of the gradient so it looks like the gradient is transitioning (which is what the duplicate is about) — Pete, Feb 20 '19 at 15:29

score 7 · Accepted Answer · answered Feb 20 '19 at 14:41

7

I used only background for those. And used background:linear-gradient(#33afbd,#33afbd); instead of background-color:#33afbd;

a {
  text-transform: uppercase;
  border-radius: 3px;
  padding: 5px 20px;
  -ms-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  background: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
  border: none;
  outline: none;
}

a:hover {
  background:linear-gradient(#33afbd,#33afbd);
}

<a href="#">Button</a>

answered Feb 20 '19 at 14:41

doğukan

23,073
13
57
69

no need gradient in the hover you can simply do `background:#33afbd` – Temani Afif Feb 20 '19 at 14:58
2

It solves the blinking issue but lose the animation on hover at the same time. – Stickers Feb 20 '19 at 15:03
It solves the blinking issue but there's no animation effect sir. – Ramesh Feb 20 '19 at 15:30

score 2 · Answer 2 · edited Feb 20 '19 at 14:49

Just set the original background-color to the one you want.

The problem is that in the transition it sets first the back to transparent, then to the hover desired color.

Solution:

a {
      text-transform: uppercase;
      background-color: #33afbd;
      border-radius: 3px;
      padding: 5px 20px;
      -ms-transition: all .4s ease-in-out;
      -moz-transition: all .4s ease-in-out;
      -o-transition: all .4s ease-in-out;
      -webkit-transition: all .4s ease-in-out;
      transition: all .4s ease-in-out;
      background-image: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
      border: none;
      outline: none;
    }

    a:hover {
      background-image: none;
    }

<a href="#">Button Here</a>

It solves the blinking issue but there's no animation effect sir. — Ramesh, Feb 20 '19 at 15:30

Gradient Button to background-color blinks on hover

2 Answers2