Transform a standard action into a moment of delight with this premium Like Button component. Built entirely for Framer using fluid framer-motion physics, this component provides immediate, satisfying visual feedback that encourages users to interact with your content.
Core Features:
Dynamic Counter: Watch the numbers roll smoothly. The component automatically formats large numbers (e.g., converting 1,500 to 1K+) and features a clean vertical slide animation when the state changes.
Heart Pulse & Particle Blast: Clicking the button triggers a satisfying "heartbeat" scale effect, accompanied by an explosive ring of customizable particles that shoot outward.
Smart Layout Scaling: Designed to be highly responsive. As you resize the component on the Framer canvas, the padding, font size, icon size, and even the particle effects intelligently scale up or down to maintain perfect proportions.
Interactive States: Includes subtle scale adjustments on hover and press, making the button feel tactile and responsive.
No-Code Customization: Take full control over the button's appearance directly from the Framer properties panel without touching any code:
Content & Typography: Set your starting "Initial Count", customize the "Button Text" (e.g., "Likes", "Kudos", "Upvotes"), and choose any font stack.
Robust Color Controls: Independent color pickers for the background, border, text, default icon/count, and the "liked" active state.
Effect Tuning: Adjust the "Shadow Intensity" for depth, and fine-tune the particle explosion by controlling the "Particle Count", "Particle Size", and "Blast Color".
Event Handling: Easily attach an onToggle event to trigger external actions or workflows when the button is clicked.
Perfect For:
Blog posts and article pages.
Portfolio projects and case studies.
User-generated content platforms.
Any UI that requires engaging social proof.
Elevate your site's micro-interactions instantly. Simply copy, paste, and customize.