Inspired by Figma's vibrant brand aesthetic. A transparent-fill button with a rotating rainbow gradient border. On hover the gradient animates its angle, creating a mesmerizing prismatic sweep. Perfect for creative tools and design platforms.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Create a Figma-inspired rainbow outline button. Use a wrapper element with a conic-gradient background (from #F24C3D through #FFE66D, #34D058, #4DBBEB, #A855F7 back to #F24C3D) and 2px padding. Inside, place the content div with a transparent background and matching inner border-radius (8px vs 10px outer). Text is white (#F5F3FF) at font-weight 500. On hover: rotate the gradient via CSS animation (@property --angle from 0deg to 360deg over 2.5s linear infinite), add a dual-layer glow (0 0 20px #8B5CF640 + 0 0 40px #8B5CF61A), and tint the inner background to #F5F3FF0D. Transition the glow over 300ms ease. This button conveys creativity, design craft, and vibrant energy.Inspired by Figma's vibrant brand aesthetic. A transparent-fill button with a rotating rainbow gradient border. On hover the gradient animates its angle, creating a mesmerizing prismatic sweep. Perfect for creative tools and design platforms.