Neon Reflection Button With Mirror Effect | HTML + CSS Code

Skip Ad (30)

Description

The Neon Button is a modern, glowing UI element designed with a futuristic aesthetic. Featuring a vibrant neon light effect, reflection shadow, and smooth hover animation, it’s perfect for dark-themed websites, coding projects, and creative portfolios.

Preview

The red, yellow, and green previews are displayed above as examples. Using the code provided below, you can easily customize and adjust the button style by applying any color you prefer, giving full creative control over your design.

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 */
.Reflection-btn {
      position: relative;
      display: inline-block;
      padding: 20px 50px;
      font-size: 28px;
      font-family: 'Noto Sans Sinhala', sans-serif;
      color: #0ff;
      background:#333232;
      border: none;
      border-radius: 4px;
      text-align: center;
      text-decoration: none;
      letter-spacing: 2px;
      box-shadow: 0 0 15px #0ff, 0 0 25px #0ff;
      text-shadow: 0 0 5px #0ff, 0 0 15px #0ff, 0 0 30px #0ff;
      overflow: hidden;
}
.Reflection-btn:hover {
      box-shadow: 0 0 25px #0ff, 0 0 40px #0ff;
      cursor: pointer;
}

● 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="Reflection-btn">Click Me</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 */
.Reflection-btn {
      position: relative;
      display: inline-block;
      padding: 20px 50px;
      font-size: 28px;
      font-family: 'Noto Sans Sinhala', sans-serif;
      color: #0ff;
      background:#333232;
      border: none;
      border-radius: 4px;
      text-align: center;
      text-decoration: none;
      letter-spacing: 2px;
      box-shadow: 0 0 15px #0ff, 0 0 25px #0ff;
      text-shadow: 0 0 5px #0ff, 0 0 15px #0ff, 0 0 30px #0ff;
      overflow: hidden;
}
.Reflection-btn::after {
      content: attr(data-text);
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 100%;
      color: #0ff;
      text-shadow: 0 0 5px #0ff, 0 0 15px #0ff;
      transform: scaleY(-1);
      opacity: 0.3;
      background: linear-gradient(to bottom, rgba(0,255,255,0.3), transparent);
      -webkit-background-clip: text;
      background-clip: text;
}

.Reflection-btn:hover {
      box-shadow: 0 0 25px #0ff, 0 0 40px #0ff;
      cursor: pointer;
}

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="Reflection-btn">Click Me</button>

● Update or Publish.