DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Glitch Button - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Glitch Button
jitesh208
Jan 20, 2026
2
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<button class="glitch-button" data-text="GLITCH">GLITCH</button>
1
* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #000; font-family: 'Courier New', monospace; overflow: hidden; } .glitch-button { position: relative; padding: 30px 80px; font-size: 28px; font-weight: bold; color: #00ff00; background: #000; border: 3px solid #00ff00; cursor: pointer; text-transform: uppercase; letter-spacing: 4px; transition: all 0.1s; box-shadow: 0 0 20px #00ff00; } .glitch-button::before, .glitch-button::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 30px 80px; } .glitch-button::before { color: #ff00ff; animation: glitch1 0.3s infinite; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); } .glitch-button::after { color: #00ffff; animation: glitch2 0.3s infinite; clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); } @keyframes glitch1 { 0%, 100% { transform: translate(0); } 33% { transform: translate(-3px, 2px); } 66% { transform: translate(3px, -2px); } } @keyframes glitch2 { 0%, 100% { transform: translate(0); } 33% { transform: translate(3px, -2px); } 66% { transform: translate(-3px, 2px); } } .glitch-button:hover { animation: shake 0.1s infinite; box-shadow: 0 0 40px #00ff00; } @keyframes shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2px, 2px); } 50% { transform: translate(2px, -2px); } 75% { transform: translate(-2px, -2px); } } .glitch-button.active { animation: intense-glitch 0.5s; } @keyframes intense-glitch { 0%, 100% { transform: translate(0, 0) scale(1); } 10% { transform: translate(-10px, 5px) scale(1.1); } 20% { transform: translate(10px, -5px) scale(0.9); } 30% { transform: translate(-5px, -10px) scale(1.05); } 40% { transform: translate(5px, 10px) scale(0.95); } 50% { transform: translate(-10px, -5px) scale(1.1); } 60% { transform: translate(10px, 5px) scale(0.9); } 70% { transform: translate(-5px, 10px) scale(1.05); } 80% { transform: translate(5px, -10px) scale(0.95); } 90% { transform: translate(-2px, 2px) scale(1.02); } } .scan-line { position: fixed; width: 100%; height: 2px; background: #00ff00; opacity: 0; pointer-events: none; animation: scan 2s linear infinite; } @keyframes scan { 0% { top: 0; opacity: 0; } 50% { opacity: 0.5; } 100% { top: 100%; opacity: 0; } }
1
const btn = document.querySelector('.glitch-button'); btn.addEventListener('click', function() { btn.classList.add('active'); for (let i = 0; i < 10; i++) { setTimeout(() => { document.body.style.background = i % 2 === 0 ? '#000' : '#111'; }, i * 50); } setTimeout(() => { btn.classList.remove('active'); document.body.style.background = '#000'; }, 500); });
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!