How to put transition on background (color to radial-gradient)

Question

I have an element with background set as color

On hover background is set as radial-gradient

I want to make transition between colors on hover but it creates weird effect where my element disappear for a second.

Here is link

Is it possible to switch between color and gradient without this problem?

.link {
  display: block;
  position: absolute;
  bottom: 20%;
  padding: 0 25px;
  height: 42px;
  line-height: 42px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  background: red;
  color: white;
  transition: all 0.3s ease-in-out;
}

.link:hover {
  text-decoration: none;
  background: radial-gradient(98px 98px at center center, red 0%, #0088b5 100%);
}

score 0 · Answer 1 · answered May 06 '19 at 13:29

You can play with background-size:

.link {
  display: inline-block;
  padding: 0 25px;
  line-height: 42px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  background-image: radial-gradient(circle,red 0%, #0088b5 100%);
  background-position:center;
  background-size:600% 600%; /*a big size to see only the red*/
  color: white;
  text-decoration: none;
  
  transition: all 0.3s ease-in-out;
}

.link:hover {
  background-size:150% 150%; /* reduce the size to see the gadient effect*/
}

<div class="link">Link</div>

score 0 · Answer 2 · answered May 06 '19 at 13:37

You can use the :before pseudo-element along with a transition on the opacity of the background color to get this effect.

Credit: Dave Lunny.

Also, check out this previous question.

.link {
  display: block;
  position: absolute;
  bottom: 20%;
  padding: 0 25px;
  height: 42px;
  line-height: 42px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  background: rgba(255, 0, 0, 1);
  color: white;
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

.link:before {
  border-radius: inherit;
  content: '';    
  display: block;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: -100;
  background: radial-gradient(98px 98px at center center, red 0%, #0088b5 100%);
}

.link:hover {
  text-decoration: none;
  background: rgba(255, 0, 0, 0);
}

<a class="link" href="#">Hover Me!</a>

How to put transition on background (color to radial-gradient)

2 Answers2