NotSimpleUIComponentsButtons
Animated Border Button
A clean, theme-aware animated border button using dual-surface layered boxes with rotating orbits and fluid edge waves.
Preview
Motion Variations
Color Schemes
Rounded Geometry
Installation
import { AnimatedBorderButton } from "@/components/buttons";
export default function Example() {
return (
<AnimatedBorderButton animation="rotate" colorScheme="blue-white">
Get Started
</AnimatedBorderButton>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | "Click Me" | Button label or content. |
animation | "rotate" | "reverse-rotate" | "wave" | "rotate" | The motion mechanic driving the border movement. |
colorScheme | "blue-white" | "chrome" | "blue-white" | Color palette used by the motion layer. |
borderWidth | number | 2 | Border thickness in pixels. |
duration | number | 3 | Animation loop cycle in seconds. |
rounded | "md" | "lg" | "xl" | "full" | "full" | Corner radius geometry. |
innerClassName | string | "" | Classes applied to the inner foreground box. |
className | string | "" | Classes applied to the outer container. |
...props | HTMLMotionProps<"button"> | — | Standard HTML button attributes. |
Component Source
Liquid Button
A tactile liquid pill button featuring high-gloss specular shine, glass depth layers, and intense vibrant blue liquid lighting.
Pixel Grid Button
A tactile cobalt blue button featuring a high-density matrix of geometric pixels that react to clicks with an outward opacity wave and localized depth depression.