Create an Eye-Catching CSS Glow Button in Just a Few Steps

Faraz

By Faraz - Last Updated:

Learn how to create an eye-catching CSS glow button with simple HTML and CSS. This tutorial covers everything from creating HTML markup to adding hover and glow effects.

Join us on Telegram
how to create a pure css glow button using html and css.png
Read AlsoHow to Create a Circle Loader using HTML and CSS.jpgHow to Create a Circle Loader using HTML and CSS: Step-by-Step Guide

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

When creating buttons, it's usually easy to make them look great, but things start to get complicated when you want to make the button glow. This is where CSS glowing buttons come in handy! In this blog article, you'll find out how simple it is to take a standard button and make it glow with just a few lines of code.

Let's start making an amazing glowing button using HTML and Pure CSS step by step.

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Created by: Pranjal Bhadu

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Glow Button.

Breakdown of the Code:

  1. <!DOCTYPE html>

    • Declares the document type as HTML5.

  2. <html lang="en">

    • Defines the document as an English-language HTML page.

  3. <head> Section:

    • <title>Glow Button</title> → Sets the webpage title to "Glow Button" (visible on the browser tab).
    • <meta charset="UTF-8" /> → Ensures proper text encoding (supports all characters).
    • <meta name="viewport" content="width=device-width" /> → Makes the page responsive on different screen sizes.
    • <link rel="stylesheet" href="styles.css" /> → Links an external CSS file (styles.css) to style the page.

  4. <body> Section:

    • Contains three <a> (anchor) elements that act as buttons.
    • Each <a> contains:
      • Four <span> elements → used to create decorative glowing effects using CSS.
      • Text "Neon button" → This is the visible label of the button.

After creating the files, just paste the following codes into your file. Remember that you must save a file with the .html extension.

Read Alsocreate a gooey effect loader with html and css.jpgCreate a Gooey Effect Loader with HTML and CSS

Step 2 (CSS Code):

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our glow effect. Let's break down the CSS code step by step:

1. Importing Google Font

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
  • Imports the Raleway font from Google Fonts.
  • The font will be used in the body section.

2. Resetting Default Styles

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  • Removes default margins and paddings from all elements.
  • box-sizing: border-box; ensures padding and border are included in an element’s total width/height.

3. Styling the Body

body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    background: #050801;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
}
  • Centers the content both horizontally and vertically using flexbox.
  • Background color: #050801 (dark color to enhance the neon glow effect).
  • Uses Raleway font with bold weight.

4. Styling the Button (<a> tag)

a{
    position: relative;
    display: inline-block;
    padding: 25px 30px;
    margin: 40px 0;
    color: #03e9f4;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
    overflow: hidden;
    margin-right: 50px;
}

Key Features:

  • display: inline-block; → Makes the <a> tag behave like a button.
  • Padding & margin → Creates proper spacing.
  • Text color: #03e9f4 (Neon Cyan).
  • text-transform: uppercase; → Makes text uppercase.
  • transition: 0.5s; → Smooth transition effects.
  • overflow: hidden; → Hides extra animations outside the button.

5. Hover Effect (a:hover)

a:hover{
    background: #03e9f4;
    color: #050801;
    box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
     -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}
  • Changes background to Neon Cyan (#03e9f4) when hovered.
  • Text color switches to dark (#050801).
  • Glowing effect: Uses box-shadow to create a neon glow.
  • Reflection Effect: -webkit-box-reflect adds a subtle reflection below the button.

6. Color Variations for Different Buttons

a:nth-child(1){
    filter: hue-rotate(270deg);
}
a:nth-child(2){
    filter: hue-rotate(110deg);
}
  • Changes button color using hue-rotate().
  • Each button has a unique color while keeping the same glowing effect.

7. Creating Animated Borders (span elements)

Each <a> tag contains four <span> elements. These are used to create animated, glowing borders.

Top Border Animation

a span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#03e9f4);
    animation: animate1 1s linear infinite;
}
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}
  • Creates a thin top border (height: 2px).
  • Starts from the left (left: -100%) and moves to the right.
  • Uses @keyframes animate1 for continuous motion.

Right Border Animation

a span:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#03e9f4);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}
  • Creates a thin right border (width: 2px).
  • Moves from top to bottom.
  • animation-delay: 0.25s; → Delays the animation slightly for smooth effects.

Bottom Border Animation

a span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,#03e9f4);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
}
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}
  • Creates a bottom border.
  • Moves from right to left.
  • Delayed slightly (0.50s) for smooth animation.

Left Border Animation

a span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#03e9f4);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}
  • Creates the left border.
  • Moves from bottom to top.
  • Delayed by 0.75s for continuous looping effect.

Finally, we will link CSS files into HTML so that we can see the final result. Congratulations! You have now learned how to create a Pure CSS Glow Button using HTML and CSS.

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    background: #050801;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
}
a{
    position: relative;
    display: inline-block;
    padding: 25px 30px;
    margin: 40px 0;
    color: #03e9f4;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
    overflow: hidden;
    margin-right: 50px;
   
}
a:hover{
    background: #03e9f4;
    color: #050801;
    box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
a:nth-child(1){
    filter: hue-rotate(270deg);
}
a:nth-child(2){
    filter: hue-rotate(110deg);
}
a span{
    position: absolute;
    display: block;
}
a span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#03e9f4);
    animation: animate1 1s linear infinite;
}
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}
a span:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#03e9f4);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}
a span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,#03e9f4);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
}
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}


a span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#03e9f4);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}

Final Output:

how to create a pure css glow button using html and css.gif
Read Alsouse html css and javascript to build your own music player.jpgUse HTML, CSS and JavaScript to Build Your Own Music Player

Conclusion:

By following this tutorial, you've learned how to create an eye-catching CSS glow button in just a few steps. Buttons are an essential part of user interface design, and creating an impressive button can enhance the user experience and make a lasting impression. We encourage you to experiment with different styles and effects to create buttons that are unique and memorable. We hope this tutorial has been helpful in teaching you how to create an eye-catching CSS glow button.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: css, glow button, web design, user interface, ui/ux design, html, css button design, css glow effect, create a css glow button, css button tutorial
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺