Gradient Button To Background-color Blinks On Hover

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

Solution 1:

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: 5px20px;
  -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);
}

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

Solution 2:

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.

Answer :

a {
      text-transform: uppercase;
      background-color: #33afbd;
      border-radius: 3px;
      padding: 5px20px;
      -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;
    }

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