GROW & GLOW!
A button that grows and then changes colors and grows when clicked.

HTML




            

CSS

.btn {
    padding: 15px 30px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.2em;
    transition: all 0.3s;
    font-family: 'Comic Sans MS', cursive;
}
.btn-neon {
    background: #000;
    color: #fff;
    box-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff;
}
.btn-neon:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffff;
}
.btn-bounce {
    background: #ffcc00;
    color: #000;
}
.btn-bounce:active {
    animation: bounce 0.5s;
}
@keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}
.btn-spin {
    background: #00ff00;
    color: #000;
}
.btn-spin:hover {
    animation: spin 1s infinite linear;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}
            

JavaScript

// No JS needed for these buttons!
            
GLITCH & PULSE!
Buttons with glitchy and pulsing effects.