-1

I'm really not sure how to describe this:

On button click (the button is a white circle with a + in the middle).

Circles of other colours appear one by one, then disappear one by one, starting from the inner circle.

Example

Is there a way to do this with CSS / what is it called so I can Google it?

Thanks.

Arr
  • 33
  • 5

1 Answers1

1

here is an example below, you can just play with the numbers of the colors.

HTML : 

<div></div>

css: 

div{
    width: 400px;
    height: 300px;
    background: rgb(71,177,215);
    background: radial-gradient(circle, rgba(71,177,215,1) 7%, rgba(66,68,68,1) 7%, rgba(17,84,156,1) 9%, rgba(47,251,251,1) 9%, rgba(11,107,181,1) 11%, rgba(0,0,0,1) 11%, rgba(1,2,13,1) 13%, rgba(29,20,187,1) 13%);
}

there is a lot of online tools u can generate gradient with it I use, https://cssgradient.io/

Mustafa Ali
  • 11
  • 4