Components
The GlowButton component is a beautifully crafted, interactive button that delivers a premium, modern feel through smooth animations and subtle lighting effects. Designed using Framer Motion and Tailwind CSS, it features a pearl-like gradient background with dynamic inner shadows and glowing highlights that softly react to user interactions. On hover, the button scales up gracefully with a spring-based transition, while the inner reflections and glow layers shift delicately to create a sense of depth and realism. Its sleek motion, gentle light diffusion, and responsive feedback make the GlowButton ideal for high-end interfaces, landing pages, and any design that aims to blend elegance with interactivity.
Loading preview...
import React from "react";
import GlowButton from "@/components/ui/glow-button";
export default function PearlButtonDemo() {
return (
<GlowButton label="Ruvy Button" />
);
}