I am struggling with one header banner element, I need to get it: when it is displayed on the page, the text should be displayed on a purple background and on the yellow only the button should be and it should be hidden under the purple one. And so when I click on the button on the yellow background (drop by drop interactive), the yellow comes to the fore and the purple on the second (they cross in the middle are superimposed) an animated text is shown, which is on the yellow background and disappears from purple and a yellow button is shown on a purple background.
On mobile it should be so that a yellow button is visible on a purple background and when clicked, a yellow background with a purple button is shown.
I hope that it is understandable to get the effect.
All gratitude for help! ❤️
My code here:
https://codepen.io/mary_pieroszkiewicz/pen/rNNVVBy
