Change a button background to a different color by animating a radial gradient

Question

I have a button that, when I select it, I want to add an animated class with a circle that increases in size until the entire background takes on the secondary color. The only problem is that the animation isn't working well, it's crashing. Does anyone know how I can go about solving this problem? Below I leave more or less the method I am using

function change(el){
  el.classList.add('animated')
}

.animated{
  animation: disable 1s linear 1 alternate;
}
@keyframes disable{
  from{
    background: radial-gradient(circle, #00c7be 99%, #4e5d78 100%);
  }
  to{
    background: radial-gradient(circle, #00c7be 0%, #4e5d78 1%);
  }
}

<button onclick="change(this)">
  button
</button>

https://stackoverflow.com/questions/57218443/how-to-animate-a-radial-gradient-using-css — epascarello, May 16 '23 at 16:34
@TemaniAfif -- I disagree that this question is a duplicate of the one you have marked as such. This question is not asking about animating radial gradients in general, it is asking about achieving a specific effect -- changing a button from one color to another, using a radial gradient which grows in size. The other question does not have an answer for this. — Brett Donald, May 18 '23 at 00:41
@BrettDonald I also don't agree with your answer using an SVG embed as a background image to create an animation that we can easily do using CSS radial-gradient (The duplicate detail all the possible ways to do this, I can even add more duplicates) — Temani Afif, May 18 '23 at 07:37
I agree that your linked duplicate "ripple animation with radial gradient" could answer this question. Didn't see that one before. — Brett Donald, May 18 '23 at 07:50

Brett Donald · Accepted Answer · 2023-05-18T00:52:04.533

If I understand what you want to do correctly, I would start by creating an SVG containing a circle with a radial gradient fill.

<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient gradientUnits="userSpaceOnUse" cx="25" cy="25" r="25" id="gradient-0">
      <stop offset="0" style="stop-color: rgb(255, 0, 0);"></stop>
      <stop offset="1" style="stop-color: rgb(128, 128, 255);"></stop>
    </radialGradient>
  </defs>
  <ellipse style="stroke: rgb(0, 0, 0); fill: url(#gradient-0); stroke-width: 0px;" cx="25" cy="25" rx="25" ry="25"></ellipse>
</svg>

(Note that I’m converting the SVG to PNG for purposes of this answer, because Stack Overflow doesn’t allow SVG uploads.)

Then I would use this graphic as the button background, and animate its size from 0% to something large like 800%.

function change(el){
  el.classList.add('animated')
  setTimeout(() => {
    el.classList.remove('animated')
  }, 4000)
}

body {
  font-family: sans-serif;
}
button {
  border: 0;
  border-radius: 4px;
  padding: 50px 100px;
  background: #8080ff;
  color: white;
}
.animated {
  background-image: url(https://i.stack.imgur.com/mN3Gi.png);
  background-size: 0%;
  background-repeat: no-repeat;
  background-position: center;
  animation: an1 2s linear 1 forwards;
}
@keyframes an1 {
  from {
    background-size: 0%;
  }
  to {
    background-size: 800%;
  }
}

<button onclick="change(this)">
  button
</button>
<p>Click the button, then wait four seconds, it will reset, and you can try again. If the effect isn't visible the first time you click, try a second and third time. This is not a fault in the code, just a quirk of Stack Snippets.

Change a button background to a different color by animating a radial gradient

1 Answers1