Like Button Feedback
Content cards demonstrate unliked, liked, and undo states. Effect previews keep likes unchanged. Includes keyboard controls, reset, and reduced motion for article, portfolio, and community reactions.
Live demo
Interactive demoUse each heart button to like or unlike. The separate effect preview never changes counts.
Open preview in a new windowMake this effect yours
Includes Skill instructions, a Python generator, an HTML template, design notes, and an offline preview. Requires Python 3.10+ with no additional dependencies. Supports custom text and colors, keyboard controls, and reduced motion.
Download SKILL.md only- Download and unzip
Keep the
heart-reaction-grid/folder. ItsSKILL.mdfile is the Skill entry point, and scripts/ contains the generator, templates/ the HTML template, and references/ the design notes. Open preview.html directly in your browser. - Give it to your AI coding assistant
Add the folder to your project and ask your assistant to read SKILL.md. If your tool supports Skills, follow its installation method.
- Describe the result you want
Generate a pink like-button demo titled Tap to like with accent #ff527b. Clicking updates the count and clicking again undoes it. Effect previews must not alter likes.
