Can't set hover

Question

.buttons a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 1%;
  font-size: 20px;
  font-family: "Montserrat", monospace;
  font-weight: 800;
  transition: 0.5s ease;
  border: #fff solid;
  border-radius: 12px;
  border-width: 3px;
}

.inst {
  background: none;
  transition: 2s ease;
}

.inst:hover {
  background: linear-gradient(125deg, #5E529C, #AD3B8D, #E4243E, #F27F46, #FBC24E);
}

<div class="buttons">
  <a href="http://t.me/adilkhanalimberdi" target="_blank" class="tg">Telegram</a>
  <a href="https://www.instagram.com/adilkhanarts/" target="_blank" class="inst">Instagram</a>
</div>

I wrote a transition: 0.5s easy; but that doesn't work, ideally the background and border should smoothly transition along the gradient, and the text color: none doesn't work either.

Where is text-color: none used? – A Haworth Apr 22 '23 at 10:19 — A Haworth, Apr 22 '23 at 10:19
You can't animate linear gradient from background none. – digitalniweb Apr 22 '23 at 18:26 — digitalniweb, Apr 22 '23 at 18:26

score 0 · Answer 1 · answered Apr 22 '23 at 19:06

Gradients don't support transitions yet (although the current spec says they should support like gradient to like gradient transitions via interpolation.).

If you want a fade-in effect with a background gradient, you have to set an opacity on a container element and 'transition` the opacity.

Can't set hover

1 Answers1