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%).

• Set the pseudo-element’s background to two radial gradients (radial-gradient(circle at 25% 25%, rgba(255,255,255,0.5) 10%, transparent 50%) and radial-gradient(circle at 75% 75%, rgba(255,255,255,0.5) 15%, transparent 60%)) and background-size: 50% 50%.

• Apply filter: blur(20px) and pointer-events: none to the pseudo-element.

• Define a @keyframes liquid animation that rotates the pseudo-element 360° and translates it back and forth (0% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(25%,25%) rotate(180deg); } 100% { transform: translate(0,0) rotate(360deg); }).

• Apply the liquid animation to ::before with a duration of 3s, ease-in-out, and infinite iteration.

Goal

Write CSS rules to animate a blurred radial-gradient overlay inside the button, producing a continuous liquid sheen effect on hover (and optionally keeping it always active).

Constraints

• Use only CSS (no JavaScript).

• Button padding should be 1rem 2rem.

• Background color should be #007BFF and text color should be #fff.

• Border radius should be 50px.

• Pseudo-element covers with width: 200%, height: 200%, top: -50%, and left: -50%.

• Background gradients as specified, background-size: 50% 50%.

• Filter should be blur(20px).

• Animation name should be liquid.

• Animation duration should be 3s.

• Animation timing function should be ease-in-out.

• Animation iteration count should be infinite.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.