Icon Wiggle on Click
A playful bounce-and-wiggle effect triggered when an icon is clicked. Perfect for like buttons, bookmark toggles, or any icon action where you want delightful micro-feedback.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
iconwiggleclickbouncefeedback
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A playful bounce and wiggle effect triggered on icon click for delightful micro-feedback.
CSS
css
.icon { width: 48px; height: 48px; cursor: pointer; animation: wiggle 0.5s ease; }
.icon:active { animation: wiggle 0.5s ease; }
@keyframes wiggle { 0%,100%{transform: scale(1) rotate(0deg)} 25%{transform: scale(1.2) rotate(-12deg)} 75%{transform: scale(1.2) rotate(12deg)} }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M5 12h14M12 5v14"/></svg></div>Full Source
html
<!DOCTYPE html>
<html><head><style>
.icon { width: 48px; height: 48px; cursor: pointer; animation: wiggle 0.5s ease; }
.icon:active { animation: wiggle 0.5s ease; }
@keyframes wiggle { 0%,100%{transform: scale(1) rotate(0deg)} 25%{transform: scale(1.2) rotate(-12deg)} 75%{transform: scale(1.2) rotate(12deg)} }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style></head><body>
<div class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M5 12h14M12 5v14"/></svg></div>
</body></html>