Neon Edge Glow Button With Animated Border Lines | HTML + CSS Code

Skip Ad (30)

Description

This stylish Neon Edge Glow Button is a pure HTML + CSS design that creates a futuristic glowing effect with animated border lines. On hover, the button lights up with a neon glow, smooth transitions, and animated moving lines that make it stand out as a modern call-to-action.

It’s lightweight, responsive, and customizable with a single CSS variable (--clr) for the glow color, making it perfect for coding projects, portfolios, landing pages, and blogs. Since no JavaScript is required, it loads fast and works smoothly on all modern browsers.

Preview

buttons shown in green, pink, blue and purple to demonstrate different neon accents. Simply edit the --clr CSS variable in the example code (or set it inline on each button) to change the glow color to your preferred shade. No JavaScript required — just paste and customize.

Step By Step

Adding the Neon Button in Blogger

Step 1 – Add CSS

● Login to your Blogger Dashboard using your Google account.
● From the left sidebar, click on Theme.
● In the Theme section, click the downward arrow (▾) next to the Customize button and select Edit HTML.
● In the HTML editor, press Ctrl + F (or Cmd + F on Mac) to open the search bar.
● Search ]]></b:skin>
● When you find it, paste this CSS code just above it.

CSS

/* Codez By codez.sithufilms.lk */
.btn {
  position: relative;
  background: #1a1a1a;
  color:var(--clr);
  text-transform: uppercase;
  border: none;
  font-size: 1rem;
  padding: 1rem 3rem;
  letter-spacing: 0.1rem;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
}
.btn:hover {
  letter-spacing: 0.2rem;
  color:var(--clr);
  background: var(--clr);
  box-shadow: 0 0 10px var(--clr), 0 0 20px var(--clr);
  text-shadow: 0 0 5px var(--clr), 0 0 10px var(--clr);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: #111;
  border-radius: 6px;
  z-index: 0;
}
.btn span {
  position: relative;
  z-index: 2;
}
.btn i {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
}
.btn i::before,
.btn i::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  border: 4px solid var(--clr);
  background: #111;
  transition: 0.3s;
}
.btn i::before {
  left: 80%;
  top: -2px;
}
.btn i::after {
  left: 20%;
  bottom: -2px;
}
.btn:hover i::before {
  width: 20px;
  left: 20%;
  animation: move 2s infinite;
}
.btn:hover i::after {
  width: 20px;
  left: 80%;
  animation: move 2s infinite;
}
@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(6px); }
  100% { transform: translateX(0); }
}

● Click Save to apply the changes to your theme.

Step 2 – Add the Button HTML

● Go back to your Blogger Dashboard and open the Posts/Pages section.
● Create a New Post/Page or edit an existing Post/Page where you want to add the gradient buttons.
● In the post editor, click on the pen icon (✏️) or select HTML View from the top-right corner to switch from Compose mode to HTML mode.
● Copy and paste the provided HTML button code into the desired position inside your post.

CSS

<button class="btn" style="--clr:#39FF14"><span>Click Me</span><i></i></button>

● Update or Publish.

Adding the Neon Button in WordPress

Step 1 – Add CSS

● Login to your WordPress Dashboard using your admin account.
● From the left sidebar, go to Appearance → Customize.
● In the Customizer panel, scroll down and click on Additional CSS.
● Inside the text box that appears, paste this CSS code.

CSS

/* Codez By codez.sithufilms.lk */
.btn {
  position: relative;
  background: #1a1a1a;
  color:var(--clr);
  text-transform: uppercase;
  border: none;
  font-size: 1rem;
  padding: 1rem 3rem;
  letter-spacing: 0.1rem;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
}
.btn:hover {
  letter-spacing: 0.2rem;
  color:var(--clr);
  background: var(--clr);
  box-shadow: 0 0 10px var(--clr), 0 0 20px var(--clr);
  text-shadow: 0 0 5px var(--clr), 0 0 10px var(--clr);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: #111;
  border-radius: 6px;
  z-index: 0;
}
.btn span {
  position: relative;
  z-index: 2;
}
.btn i {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
}
.btn i::before,
.btn i::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  border: 4px solid var(--clr);
  background: #111;
  transition: 0.3s;
}
.btn i::before {
  left: 80%;
  top: -2px;
}
.btn i::after {
  left: 20%;
  bottom: -2px;
}
.btn:hover i::before {
  width: 20px;
  left: 20%;
  animation: move 2s infinite;
}
.btn:hover i::after {
  width: 20px;
  left: 80%;
  animation: move 2s infinite;
}
@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(6px); }
  100% { transform: translateX(0); }
}

Click Publish (top of the page) to save your changes.

Step 2 – Add the Button HTML in a Post/Page

● Go back to your WordPress Dashboard.
● From the left sidebar, click on Posts/Pages section.
● Create a New Post/Page or edit an existing Post/Page where you want to add the gradient buttons.
● In the Block Editor (Gutenberg), click the + (Add Block) icon and select a Custom HTML block.
● Inside the Custom HTML block, paste this HTML button code.

CSS

<button class="BTN3" style="--clr:#39FF14"><span>Click Me</span><i></i></button>

● Update or Publish.