Как залить фон родительского элемента из центра кнопки анимированно?

Question

[jyweta]

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

Привет! Есть карточка containerCard. Просто див со скругленными краями, бордером и тенью. У него есть кнопка, пусть это будет бургер. Как сделать так, чтоб при нажатии на эту кнопку-бургер, карточка заливалась цветом кнопки ИЗ точки центра этого бургера? Будто бы при нажатии на него под ним роняется гипотетическое ведро с краской. Не просто цвет фона поменялся у родителя, а именно из какой то точки анимированно залилось.



Что то нагуглил, сами анимации то сложностей вроде не вызывают, их вызывает логика. В этом примере по ссылке кнопка заливается, но она же сама, не родительский элемент.

Comments

[Антон Литвиненко]

https://www.youtube.com/watch?v=WOSaNbpHNqU
эффект для кнопки, но немного переделать и для любого элемента будет

[Froggyweb]

подход в лоб - псевдоэлемент у бургера который там делает всякие трансформы с анимацией загугли - получишь массу интересного

[Ankhena]

Делаете круглый псевдоэлемент такого размера, чтобы занимал всю площадь блока. Иногда это получается сделать через calc и padding, иногда нет и тогда на JS задаете высоту и ширину через кастомные свойства.
Позиционируете псевдо в центр и сжимаете в 0.

При клике на кнопку меняете класс у блока с псевдо.

[Ankhena]

Типа того https://jsfiddle.net/ayqce6md/