How to Create a Stunning Glowing Button with CSS

In this article, I’ll show you how to create a glowing button effect using HTML and CSS. When you hover your mouse over the button, a glowing aura dynamically follows the cursor’s movement, creating a mesmerizing visual effect.

Complete

---

Implementation Steps

1. HTML Structure Start by creating a simple HTML page with three buttons. Each button is represented by an <a> tag, with a style attribute to set its unique color:

<a href="#" style="--color: #0f0"><span>BUTTON</span></a>
<a href="#" style="--color: #ff0"><span>BUTTON</span></a>
<a href="#" style="--color: #f0f"><span>BUTTON</span></a>

The --color is a CSS custom property used to dynamically set the button’s main color.

---

2. CSS Styling The main glowing effect is achieved with the following CSS:

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Layout Styles */
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    height: 100vh;
    background-color: #222;
}

/* Button Base Style */
a {
    position: relative;
    padding: 20px 60px;
    background-color: rgba(45, 45, 45, 1);
    border-radius: 50px;
    text-decoration: none;
    color: #999;
    font-size: 1.5rem;
    transition: 0.5s;
    overflow: hidden;
}

Key Components of the Glowing Effect:

::before Pseudo-element: Creates a dynamic radial gradient glow.

a::before {
    content: '';
    position: absolute;
    top: var(--y, 0px);
    left: var(--x, 0px);
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(var(--color), transparent, transparent);
    opacity: 0;
    transition: 0.5s;
}
a:hover::before {
    opacity: 1;
}

::after Pseudo-element: Adds a semi-transparent inner background for better contrast.

a::after {
    content: '';
    background-color: rgba(45, 45, 45, 0.8);
    position: absolute;
    inset: 2px;
    border-radius: 48px;
}

---

3. JavaScript for Dynamic Glow Positioning Use JavaScript to listen for mouse movement over the button and dynamically update the --x and --y properties:

const buttons = document.querySelectorAll('a');
buttons.forEach(button => {
    button.addEventListener('mousemove', e => {
        const x = e.clientX - e.target.offsetLeft;
        const y = e.clientY - e.target.offsetTop;

        e.target.style.setProperty('--x', `${x}px`);
        e.target.style.setProperty('--y', `${y}px`);
    });
});

---

Summary

With just HTML, CSS, and a touch of JavaScript, you can create a dynamic glowing button effect. This effect is not only visually appealing but also enhances user interaction, making it a perfect fit for your website. Try it out and see for yourself!