Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Liquid Button Morph Effect

Problem: Liquid Button Morph Effect

Try to 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, top: -50%, left: -50%, width: 200%, and height: 200%). ...