Create a water drop button with CSS and pointer feedback

A water-like control needs a clear edge before it needs animation. Use an asymmetric rounded shape or familiar pill, a translucent fill, an inner highlight near the light source, and a darker lower edge. The highlight and shadow should agree about direction or the surface will look metallic instead of liquid.

Place the visible label in its own stacking layer and keep contrast independent from whatever sits behind the translucent button. A tinted internal surface is more reliable than blending directly with arbitrary page content.

Gradients and pseudo-elements can bend color around the edge while a small blurred highlight creates a wet specular point. Backdrop-filter can enrich the effect, but it should be optional because support, contrast, and performance vary.

Never apply blur or displacement to the text. The label is interface content, not part of the simulated material. Keep effect layers aria-hidden and pointer-events none so they cannot block activation.

                      .water-button::before {
  content: "";
  position: absolute;
  inset: 8% 14% auto;
  block-size: 34%;
  border-radius: 999px;
  background: linear-gradient(#fff9, transparent);
}
                    

JavaScript can set custom properties for the pointer coordinates, then restart one pseudo-element animation from that location. Cap the ripple at the button boundary and remove transient state after the animation so repeated activation stays predictable.

Keyboard activation has no pointer coordinate, so center the ripple or use a full-surface pressure pulse for Enter and Space. Both input modes should receive equally clear feedback even if their visual origin differs.

• Effect layers ignore pointer events.
• Ripple origin has a keyboard fallback.
• Repeated clicks do not accumulate DOM nodes.

Without backdrop filtering, the button should retain its tinted surface, edge, label, and focus ring. Under reduced motion, replace traveling ripples with a short opacity or shadow change. Under forced colors, allow system button colors and outlines to carry the state.

Test the control over light, dark, detailed, and flat backgrounds. Liquid transparency is only successful when the action remains readable in every placement the component promises to support.