Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Liquid Button Morph Effect

Solution: Liquid Button Morph Effect

Let’s create a liquid-style button with animated glowing gradients that swirl and move using CSS keyframes.

We'll cover the following...

Problem description

Given an HTML page containing a <button class="liquid-button">Click Me</button> element, write CSS to:

  • Style .liquid-button with padding, background color, text color, border-radius, and overflow: hidden.

  • Create a ::before pseudo-element that covers the button (using position: absolute ...