Water Ripple Button

Show Preview
Water Ripple Button
Water Ripple Button

About Water Ripple Button

A small interaction with a fluid feel

Water Ripple Button is an interactive Framer button with a moving water surface. Glide across it to leave a trail of ripples, or click and tap to create a splash. Subtle rain and flowing highlights keep the surface alive between interactions.

Use it as a distinctive call to action for a landing page, portfolio or digital product. Its water-inspired motion adds character without taking the focus away from the message.

Shape the look and motion

Start with five looks, from deep ocean blue to soft lilac and light glacier, or create a custom water palette. Adjust the surface, depth, lines and highlights to suit your design.

Fine-tune ripple size, strength and duration, as well as the pointer trail, splash, rain, swell, flow and gloss. Dial the movement back for a quieter detail or make the response more noticeable.

Change the button text, link and new-tab behavior. Typography, text color, an optional arrow, padding, corners, border and shadow are all available in Framer’s property controls. Hover glow, press scale and focus color can also be adjusted.

Where it fits

  • Hero sections and landing page calls to action

  • Creative studios, portfolios and personal websites

  • Product launches, app pages and sign-up flows

  • Travel, hospitality and coastal-inspired brands

  • Wellness, beauty and lifestyle websites

  • Contact links, booking buttons and digital experiences

Supports keyboard focus and reduced-motion preferences. The button adapts to its container and includes a static water-style fallback.

Related Components

IO Knob
Orbit Glow Button
Animated Scroll
Depth Button