Neon Button Effects with FSCSS ⚡

Want to make your UI glow like a futuristic dashboard?
With FSCSS, you can create neon button effects in just a few lines — no long CSS needed.

---

💻 Demo Code:

<section class="buttons">
  <button>Click Me</button>
  <button>Hover Glow</button>
  <button>Neon Effect</button>
</section>

<style>
  @arr colors[#0ff, #f0f, #0f0, #ff0]
  @arr glows[0 0 10px, 0 0 20px, 0 0 30px, 0 0 40px]

  .buttons {
    display: flex;
    gap: 1.2em;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #111;
  }

  .buttons button {
    background: transparent;
    border: 2px solid #0ff;
    color: #fff;
    padding: 0.8em 1.6em;
    font-size: 1.2em;
    border-radius: 0.5em;
    cursor: pointer;
    transition: 0.3s ease-in-out;
  }

  .buttons button:nth-child(@arr.colors[]) {
    border-color: @arr.colors[];
    box-shadow: @arr.glows[] @arr.colors[];
  }

  .buttons button:nth-child(@arr.colors[]):hover {
    background: @arr.colors[];
    color: #111;
    box-shadow: 0 0 10px @arr.colors[], 
                0 0 20px @arr.colors[], 
                0 0 40px @arr.colors[];
  }
</style>

<script async src="https://cdn.jsdelivr.net/npm/fscss@1.1.6"></script>

---

📱 Responsive Tip

Make sure buttons resize smoothly on small screens:

@media(max-width: 600px){
  .buttons { flex-direction: column; }
  .buttons button { width: 80%; }
}

---

🎨 Thumbnail Idea

Dark background (#111)

Big glowing text: “Neon Button Effect”

A few glowing button outlines below the text

---

Wrap