Neon Pulse

jitesh208
Jan 20, 2026 3
Live Preview

Live Editor

 <button class="neon-button">
        <span class="neon-text">NEON PULSE</span>
        <span class="neon-border"></span>
    </button>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #050505;
    font-family: 'Arial', sans-serif;
    overflow: hidden;
}

.neon-button {
    position: relative;
    padding: 25px 80px;
    font-size: 28px;
    font-weight: bold;
    background: transparent;
    border: none;
    cursor: pointer;
    overflow: hidden;
}

.neon-text {
    position: relative;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 
        0 0 10px #fff,
        0 0 20px #fff,
        0 0 40px #0ff,
        0 0 80px #0ff,
        0 0 120px #0ff;
    animation: textPulse 2s ease-in-out infinite;
    z-index: 2;
}

@keyframes textPulse {
    0%, 100% {
        text-shadow: 
            0 0 10px #fff,
            0 0 20px #fff,
            0 0 40px #0ff,
            0 0 80px #0ff,
            0 0 120px #0ff;
    }
    50% {
        text-shadow: 
            0 0 5px #fff,
            0 0 10px #fff,
            0 0 20px #0ff,
            0 0 40px #0ff,
            0 0 60px #0ff;
    }
}

.neon-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #0ff;
    box-shadow: 
        0 0 10px #0ff,
        0 0 20px #0ff,
        0 0 40px #0ff,
        inset 0 0 10px #0ff,
        inset 0 0 20px #0ff;
    animation: borderPulse 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes borderPulse {
    0%, 100% {
        box-shadow: 
            0 0 10px #0ff,
            0 0 20px #0ff,
            0 0 40px #0ff,
            inset 0 0 10px #0ff,
            inset 0 0 20px #0ff;
    }
    50% {
        box-shadow: 
            0 0 5px #0ff,
            0 0 10px #0ff,
            0 0 20px #0ff,
            inset 0 0 5px #0ff,
            inset 0 0 10px #0ff;
    }
}

.neon-button:hover .neon-text {
    animation: textFlicker 0.1s infinite;
}

.neon-button:hover .neon-border {
    animation: borderFlicker 0.1s infinite;
}

@keyframes textFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@keyframes borderFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.neon-button:active {
    transform: scale(0.98);
}

.neon-button.clicked .neon-text {
    animation: explodeText 0.5s ease-out;
}

.neon-button.clicked .neon-border {
    animation: explodeBorder 0.5s ease-out;
}

@keyframes explodeText {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes explodeBorder {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
Categories

Neon Pulse

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
