How to fill the background of the parent element from the center of the button in an animated way?

Question

css

<div class='containerCard'>
<div class='buttonFiller'>Кнопка</div>
</div>

Hey! There is a containerCard card. Just a div with rounded edges, a border and a shadow. He has a button, let it be a burger. How to make it so that when you click on this burger button, the card is filled with the color of the button FROM the center point of this burger? As if when you click on it, a hypothetical bucket of paint drops under it. Not just the background color of the parent changed, but from some point it animatedly flooded.



I googled something, the animations themselves do not seem to cause difficulties, they are caused by logic. In this example, the link fills the button, but it is itself, not the parent element.