Instant CSS
Tools
Templates
Components
Learn
More
Pop
Animation
A quick scale-up pop, great for icon emphasis.
Reset to Default
HTML
Copy HTML
<button class="pop-btn">Click me</button>
CSS
Copy CSS
.pop-btn { padding: 12px 24px; background: #4f46e5; color: white; border: none; border-radius: 10px; font-family: sans-serif; font-weight: 700; font-size: 15px; cursor: pointer; animation: pop 1.4s ease-in-out infinite; } @keyframes pop { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.08); } 40% { transform: scale(0.97); } 60% { transform: scale(1.03); } 80% { transform: scale(1); } }
Live Preview
Click me
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.