Interaction
Liquid Morphing Button
A button with a gooey liquid morphing effect using SVG filters.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a button with a liquid morphing effect. Use an SVG filter with feGaussianBlur and feColorMatrix to create a gooey merge between the button and a smaller orb that orbits or moves on hover. The button surface should feel fluid and organic. Use Tailwind CSS. Place on a dark background so the effect reads clearly.
Chinese Prompt
创建一个带液体变形效果的按钮。使用 SVG 滤镜 feGaussianBlur 和 feColorMatrix，在按钮和一个悬停时环绕/移动的小球之间创建粘稠融合。按钮表面应感觉流动且有机。使用 Tailwind CSS。放置在深色背景上，使效果清晰可见。
## Overview
A button that uses SVG filter gooeyness to feel like liquid. High-craft and attention-grabbing.
## Features
- SVG filter gooey effect
- Orbiting/moving secondary orb
- feGaussianBlur + feColorMatrix
- Fluid organic surface
- Dark background
- Pure CSS/SVG
## Usage
Use for experimental CTAs, creative portfolios, or brand moments.
## Customization
Modify the prompt to:
- Change orb count and motion path
- Use multiple colors in the merge
- Add a click splash effect
- Make the button circular