Vibrant Glow Gradient Button With Animated Glow & Blur Effect | HTML + CSS Code

Skip Ad (30)

Description

This button features a vibrant, animated gradient that continuously shifts through multiple colors, creating a dynamic and eye-catching effect. It includes a smooth glow, subtle shadow, and layered blur for depth, while hover and click interactions provide responsive visual feedback. Fully responsive, it automatically adjusts its size, font, and shape on smaller screens, making it perfect for call-to-action buttons, landing pages, or stylish interactive elements on any website.

Preview

Below is a vibrant gradient button featuring shades of green, blue, yellow, orange, and red. The code provided can be fully customized, allowing you to adjust colors, style, and effects to seamlessly match your website’s design and branding.

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

.btn-wrap {
  position: relative;
  width: 220px;
  height: 70px;
  display: inline-block;
}
.btn {
  width: 100%;
  height: 100%;
  font-size: 22px;
  text-align: center;
  font-weight: 800;
  line-height: 70px;
  color: rgba(0,0,0,0.7);
  border-radius: 35px;
  background: linear-gradient(-45deg, #07F3F7, #13ED0C, #F7E811, #FF702E, #ED3B13);
  background-size: 600% 600%;
  animation: anime 16s linear infinite;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: transform .12s ease;
}
.btn:hover{
  opacity:.8;
}
.btn:active {
  transform: translateY(1px) scale(.998);
}
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(51,138,255,0.12);
}
.btn2 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(-50px);
  width: 100%;
  height: 100%;
  border-radius: 35px;
  background: linear-gradient(-45deg, #07F3F7, #13ED0C, #F7E811, #FF702E, #ED3B13);
  background-size: 600% 600%;
  animation: anime 16s linear infinite;
  filter: blur(25px);
  opacity: 0.8;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
@keyframes anime {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (max-width: 360px) {
 .btn-wrap {
   width: 200px;
   height: 60px;
 }
 .btn {
   font-size: 20px;
   line-height: 60px;
   border-radius: 30px;
 }
 .btn2 {
   border-radius: 30px;
   filter: blur(20px);
 }
}

● 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

<div class="btn-wrap" aria-hidden="false">
  <div class="btn2" aria-hidden="true"></div>
  <button class="btn" type="button">This is Button</button>
  </div>
</div>

● 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

.btn-wrap {
  position: relative;
  width: 220px;
  height: 70px;
  display: inline-block;
}
.btn {
  width: 100%;
  height: 100%;
  font-size: 22px;
  text-align: center;
  font-weight: 800;
  line-height: 70px;
  color: rgba(0,0,0,0.7);
  border-radius: 35px;
  background: linear-gradient(-45deg, #07F3F7, #13ED0C, #F7E811, #FF702E, #ED3B13);
  background-size: 600% 600%;
  animation: anime 16s linear infinite;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: transform .12s ease;
}
.btn:hover{
  opacity:.8;
}
.btn:active {
  transform: translateY(1px) scale(.998);
}
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(51,138,255,0.12);
}
.btn2 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(-50px);
  width: 100%;
  height: 100%;
  border-radius: 35px;
  background: linear-gradient(-45deg, #07F3F7, #13ED0C, #F7E811, #FF702E, #ED3B13);
  background-size: 600% 600%;
  animation: anime 16s linear infinite;
  filter: blur(25px);
  opacity: 0.8;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
@keyframes anime {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (max-width: 360px) {
 .btn-wrap {
   width: 200px;
   height: 60px;
 }
 .btn {
   font-size: 20px;
   line-height: 60px;
   border-radius: 30px;
 }
 .btn2 {
   border-radius: 30px;
   filter: blur(20px);
 }
}

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

<div class="btn-wrap" aria-hidden="false">
  <div class="btn2" aria-hidden="true"></div>
  <button class="btn" type="button">This is Button</button>
  </div>
</div>

● Update or Publish.