NeonButtonMagic

NeonButtonMagic is a JavaScript library that transforms standard buttons into vibrant, neon-styled elements. It dynamically assigns unique colors and adds stunning glow effects, enhancing your web application's visual appeal. Just include the script in your HTML to bring your buttons to life with eye-catching colors and radiant effects!

Overview

This JavaScript code dynamically styles all buttons on a webpage with a neon glow effect. It assigns unique colors to each button based on their ID or text content, enhancing the visual appeal and interactivity of your web application.

Features

• Neon Color Assignment: Assigns a unique neon color to each button using a predefined list or generates a random color if the list is exhausted.
• Dynamic Styling: Applies various CSS styles to buttons, including font size, padding, border, and glow effects.
• Interactive Glow Effect: Adds a glowing background effect that changes with the button's assigned color.

Demo

Check out the Demo Page to see NeonButtonMagic in action!

Code Explanation

Base Colors

const baseColors = ['#ff00ff', '#800080', '#00ff00', '#ff1493', '#00ffff'];

A set of predefined neon colors used initially for button styling.

Random Color Generation

function getRandomNeonColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

Generates random hex colors for buttons when the base colors are exhausted.

Color Mapping

function getColorForId(id) {
    if (idColorMap.has(id)) {
        return idColorMap.get(id);
    } else {
        let color;
        if (colorIndex < baseColors.length) {
            color = baseColors[colorIndex];
            colorIndex++;
        } else {
            do {
                color = getRandomNeonColor();
            } while (idColorMap.has(color));
        }
        idColorMap.set(id, color);
        return color;
    }
}

Maps each button's ID to a unique color, using either the base colors or a randomly generated one.

Button Styling

document.querySelectorAll('button').forEach((button) => {
    const id = button.id || button.innerText || Math.random().toString();
    const color = getColorForId(id);

    button.style.fontSize = '20px';
    button.style.padding = '15px 30px';
    button.style.border = `2px solid ${color}`;
    button.style.color = color;
    button.style.backgroundColor = 'transparent';
    button.style.borderRadius = '5px';
    button.style.position = 'relative';
    button.style.overflow = 'hidden';
    button.style.textTransform = 'uppercase';
    button.style.transition = 'all 0.3s ease-in-out';
    button.style.boxShadow = `0 0 10px ${color}, 0 0 20px ${color}`;
    
    const span = document.createElement('span');
    span.innerText = button.innerText;
    span.style.position = 'relative';
    span.style.zIndex = '1';
    span.style.textShadow = `
        0 0 5px ${color},
        0 0 10px ${color},
        0 0 15px ${color}
    `;
    
    button.innerHTML = '';
    button.appendChild(span);

    const glowEffect = document.createElement('div');
    glowEffect.style.content = '';
    glowEffect.style.position = 'absolute';
    glowEffect.style.top = '100%';
    glowEffect.style.left = '-50%';
    glowEffect.style.width = '200%';
    glowEffect.style.height = '200%';
    glowEffect.style.backgroundColor = color;
    glowEffect.style.filter = 'blur(20px)';
    glowEffect.style.zIndex = '-1';

    button.appendChild(glowEffect);
});

Applies CSS styles to each button, including text shadow and box shadow for the neon effect. A span element is used to preserve the text content with additional styling, and a div is added for the glowing background effect.

Usage

To use this script, simply include it in your HTML file. It will automatically apply the neon styling to all <button> elements on the page. You can also use jsdelivr if you don't want to import it. I used a url shortener to not have to manually change the updated url everytime on my pages, you can also do it by simply using:

<script src="http://kikurl.com/neonbtn"></script> 

License

This project is licensed under the MIT License - see the LICENSE file for details.