--- title: "Luxury Elegent Btn — Free Framer component · Best of Framer" description: "Free Framer component · by Karim Saif · Buttons. Ambient shine keyframe loops" canonical: "https://framer.elliotli.dev/component/luxury-elegent-btn" --- [Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Luxury Elegent Btn # Luxury Elegent Btn Ambient shine keyframe loops [View on Framer](https://framer.com/marketplace/components/luxury-elegent-btn/?via=elliot-li) ![Luxury Elegent Btn preview image 1](https://framer.elliotli.dev/og/component/luxury-elegent-btn/43cc6c3a1313da97/1600x1049.jpg) ## Summary Ambient shine keyframe loops ## Description **Luxury Button for Framer** elevates standard interactive CTA elements into premium, high-converting focal points. Built with micro-interactions in mind, the component features reactive hover and active state transformations, rotating side ornaments, and an animated SVG border stroke. Designed for production performance, it includes static renderer detection via Framer’s native hooks, custom gradient instance isolation, and complete web accessibility fallbacks. ## What It Does - **Animated SVG Border**: Triggers a smooth `stroke-dashoffset` path fill upon hover using custom accent colors. - **Interactive Micro-Transforms**: Subtle vertical translations (`translateY`) for hover and active press states paired with responsive drop shadows. - **Rotating Side Ornaments**: Dynamic diamond SVG motifs positioned at the left and right edges that smoothly rotate 180° on pointer enter. - **Continuous Ambient Shine Loop**: An integrated sweep gradient overlay powered by standard CSS keyframes for subtle sheen effects. - **Multi-State Linear Gradients**: Seamless state transitions between Default, Hover, and Active gradient background combinations. - **Smart Polymorphic Renderer**: Flexibly switches HTML elements between a semantic `