Back

Creating a Vibrant Neon Glow Button with Pulsing Animation

Learn how to design an eye-catching neon button with vibrant glow effects and subtle pulse animation using CSS.

HTML

The HTML structure for our neon glow button is straightforward - just a container div and a button element with the class neon-button.

        <div class="button-container">
          <button class="neon-button">Neon Glow</button>
        </div>

You can customize the button text to match your specific design needs.

CSS

First, we set up a dark container to showcase our neon button properly:

        .button-container {
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #0F172A;
          padding: 20px;
          border-radius: 8px;
        }

Next, we define our neon button with CSS variables for easy customization:

        .neon-button {
          --neon-color: #00FFFF;
          --neon-color-dim: rgba(0, 255, 255, 0.2);
          --button-padding: 14px 28px;
          --button-font-size: 18px;
          --glow-spread: 10px;
          --pulse-duration: 2s;
          
          position: relative;
          font-family: 'Arial', sans-serif;
          font-weight: bold;
          font-size: var(--button-font-size);
          text-transform: uppercase;
          letter-spacing: 2px;
          color: var(--neon-color);
          background-color: transparent;
          border: 2px solid var(--neon-color);
          border-radius: 4px;
          padding: var(--button-padding);
          cursor: pointer;
          text-shadow: 0 0 8px var(--neon-color-dim);
          box-shadow: 
            0 0 var(--glow-spread) var(--neon-color-dim),
            inset 0 0 var(--glow-spread) var(--neon-color-dim);
          transition: all 0.3s ease;
          overflow: hidden;
          animation: pulse var(--pulse-duration) infinite alternate;
        }

The key properties here: - We define the neon color and a dimmer version for the glow effects - The transparent background and border create the neon tube appearance - Text-shadow and box-shadow create the glow effect - We apply a pulse animation that runs infinitely, alternating between states To create the fill effect on hover, we use a pseudo-element:

        .neon-button::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: var(--neon-color);
          opacity: 0;
          z-index: -1;
          transition: opacity 0.3s ease;
        }

Next, we define the hover and active states for interactive feedback:

        .neon-button:hover {
          color: #000;
          text-shadow: none;
          box-shadow: 
            0 0 calc(var(--glow-spread) * 1.5) var(--neon-color),
            inset 0 0 calc(var(--glow-spread) * 1.5) var(--neon-color);
        }
        
        .neon-button:hover::before {
          opacity: 0.8;
        }
        
        .neon-button:active {
          transform: scale(0.95);
          box-shadow: 
            0 0 calc(var(--glow-spread) * 2) var(--neon-color),
            inset 0 0 calc(var(--glow-spread) * 2) var(--neon-color);
        }

The hover effect creates a stronger glow and fills the button with the neon color, while the active state adds a scale transform for a press effect. The pulse animation is defined using @keyframes:

        /* Pulsing animation */
        @keyframes pulse {
          0% {
            box-shadow: 
              0 0 var(--glow-spread) var(--neon-color-dim),
              inset 0 0 var(--glow-spread) var(--neon-color-dim);
          }
          100% {
            box-shadow: 
              0 0 calc(var(--glow-spread) * 1.2) var(--neon-color),
              inset 0 0 calc(var(--glow-spread) * 0.8) var(--neon-color);
          }
        }

This animation cycles the glow intensity from dim to bright, creating the classic neon pulsing effect. Finally, we add focus styles for accessibility and show how to create color variations:

        /* Focus state for accessibility */
        .neon-button:focus {
          outline: none;
          box-shadow: 
            0 0 var(--glow-spread) var(--neon-color),
            inset 0 0 var(--glow-spread) var(--neon-color),
            0 0 0 3px rgba(0, 255, 255, 0.3);
        }
        
        /* Change neon color by modifying variables */
        /* Example for different colors: */
        .neon-button.magenta {
          --neon-color: #FF00FF;
          --neon-color-dim: rgba(255, 0, 255, 0.2);
        }
        
        .neon-button.green {
          --neon-color: #00FF00;
          --neon-color-dim: rgba(0, 255, 0, 0.2);
        }

The focus state maintains the neon effect while adding a subtle focus ring, and the color variations show how to easily create different neon colors using CSS variables. This neon glow button offers several advantages: - Visual impact: Stands out dramatically on dark backgrounds. - Attention-grabbing: The pulsing glow naturally draws the user's eye. - Versatile theming: Easy to adapt to different color schemes by changing a few variables. - Interactive feedback: Multiple states (hover, active) provide clear interaction cues. - Engaging animation: The subtle pulse creates movement without being distracting. This button style is perfect for gaming websites, entertainment platforms, nightlife venues, or any interface with a dark theme where you want to create a vibrant, energetic feel.

Whole code

<div class="button-container">
  <button class="neon-button">Neon Glow</button>
</div>

<style>
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0F172A;
  padding: 20px;
  border-radius: 8px;
}

.neon-button {
  --neon-color: #00FFFF;
  --neon-color-dim: rgba(0, 255, 255, 0.2);
  --button-padding: 14px 28px;
  --button-font-size: 18px;
  --glow-spread: 10px;
  --pulse-duration: 2s;
  
  position: relative;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: var(--button-font-size);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--neon-color);
  background-color: transparent;
  border: 2px solid var(--neon-color);
  border-radius: 4px;
  padding: var(--button-padding);
  cursor: pointer;
  text-shadow: 0 0 8px var(--neon-color-dim);
  box-shadow: 
    0 0 var(--glow-spread) var(--neon-color-dim),
    inset 0 0 var(--glow-spread) var(--neon-color-dim);
  transition: all 0.3s ease;
  overflow: hidden;
  animation: pulse var(--pulse-duration) infinite alternate;
}

.neon-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--neon-color);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.neon-button:hover {
  color: #000;
  text-shadow: none;
  box-shadow: 
    0 0 calc(var(--glow-spread) * 1.5) var(--neon-color),
    inset 0 0 calc(var(--glow-spread) * 1.5) var(--neon-color);
}

.neon-button:hover::before {
  opacity: 0.8;
}

.neon-button:active {
  transform: scale(0.95);
  box-shadow: 
    0 0 calc(var(--glow-spread) * 2) var(--neon-color),
    inset 0 0 calc(var(--glow-spread) * 2) var(--neon-color);
}

/* Pulsing animation */
@keyframes pulse {
  0% {
    box-shadow: 
      0 0 var(--glow-spread) var(--neon-color-dim),
      inset 0 0 var(--glow-spread) var(--neon-color-dim);
  }
  100% {
    box-shadow: 
      0 0 calc(var(--glow-spread) * 1.2) var(--neon-color),
      inset 0 0 calc(var(--glow-spread) * 0.8) var(--neon-color);
  }
}

/* Focus state for accessibility */
.neon-button:focus {
  outline: none;
  box-shadow: 
    0 0 var(--glow-spread) var(--neon-color),
    inset 0 0 var(--glow-spread) var(--neon-color),
    0 0 0 3px rgba(0, 255, 255, 0.3);
}

/* Change neon color by modifying variables */
/* Example for different colors: */
.neon-button.magenta {
  --neon-color: #FF00FF;
  --neon-color-dim: rgba(255, 0, 255, 0.2);
}

.neon-button.green {
  --neon-color: #00FF00;
  --neon-color-dim: rgba(0, 255, 0, 0.2);
}
</style>

Creating a Vibrant Neon Glow Button with Pulsing Animation

HTML

CSS

Whole code

Comments

More buttons

Similar

See also