Instant CSS
Tools
Templates
Components
Learn
More
Rubber Band
Animation
Stretches and snaps back like a rubber band.
Reset to Default
HTML
Copy HTML
<div class="rubber">Stretch</div>
CSS
Copy CSS
.rubber { padding: 14px 28px; background: #ec4899; color: white; border-radius: 999px; font-family: sans-serif; font-weight: 700; animation: rubberBand 1s ease-in-out infinite; } @keyframes rubberBand { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } }
Live Preview
Stretch
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.