Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <title>Example</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: sans-serif; background-color: #f0f0f0; } .jelly-wobble-btn { background-color: #ff5722; color: white; border: none; padding: 15px 30px; font-size: 1.2rem; border-radius: 5px; cursor: pointer; transition: transform 0.1s; } .jelly-wobble-btn:active { animation: jelly-wobble 0.5s; } @keyframes jelly-wobble { 0% { transform: scale(1, 1); } 25% { transform: scale(0.9, 1.1); } 50% { transform: scale(1.1, 0.9); } 75% { transform: scale(0.95, 1.05); } 100% { transform: scale(1, 1); } } @media (prefers-reduced-motion: reduce) { .jelly-wobble-btn:active { animation: none; transform: scale(0.95); } } </style> <button class="jelly-wobble-btn">Click Me</button>
