◈Keyword ResearchFreeReal Google + Bing suggestions, grouped by intent.

▣Meta & SERP PreviewsoonSee how your page looks in Google, fix title & description.

◐AI Visibility ChecksoonWhat AI assistants say about your brand.

❖Schema GeneratorsoonCopy-paste JSON-LD for FAQ, Article, Product & more.

#06

Border beam button

A bright beam of light races continuously around the button's border, trailing a soft glow bloom. Built with a modern @property-animated conic gradient and a mask, no JavaScript. Available in React + Tailwind or plain HTML and CSS.

ReactTailwindCSS

// LIVE DEMO

share this component →Facebook X / Twitter LinkedIn

// THE CODE

React + Tailwind

export default function BorderBeamButton() {
  return (
    <button className="beam-btn relative px-9 py-4 rounded-2xl font-bold text-white">
      <span className="relative z-10">Launch app</span>
      <style>{`
        @property --beam-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
        .beam-btn { background:#0d1420; isolation:isolate; }
        .beam-btn::before { content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; padding:2px;
          background:conic-gradient(from var(--beam-a),
            transparent 0deg, transparent 300deg, #38bdf8 340deg, #a5f3fc 350deg, #818cf8 360deg);
          -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          -webkit-mask-composite:xor; mask-composite:exclude; animation:beam-spin 2.2s linear infinite; }
        .beam-btn::after { content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
          background:conic-gradient(from var(--beam-a),
            transparent 0deg, transparent 315deg, rgba(56,189,248,.6) 350deg, transparent 360deg);
          filter:blur(9px); animation:beam-spin 2.2s linear infinite; }
        @keyframes beam-spin { to { --beam-a:360deg; } }
        @media (prefers-reduced-motion: reduce) { .beam-btn::before,.beam-btn::after {
          animation:none; background:linear-gradient(90deg,#38bdf8,#818cf8); } }
      `}</style>
    </button>
  );
}

HTML + CSS

<!-- HTML -->
<button class="beam-btn"><span>Launch app</span></button>

<style>
@property --beam-a { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.beam-btn { position:relative; padding:16px 36px; border:0; border-radius:16px; font:700 15px system-ui;
  color:#fff; background:#0d1420; isolation:isolate; cursor:pointer; }
.beam-btn span { position:relative; z-index:10; }
.beam-btn::before { content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; padding:2px;
  background:conic-gradient(from var(--beam-a), transparent 0deg, transparent 300deg, #38bdf8 340deg, #a5f3fc 350deg, #818cf8 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; animation:beam-spin 2.2s linear infinite; }
.beam-btn::after { content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:conic-gradient(from var(--beam-a), transparent 0deg, transparent 315deg, rgba(56,189,248,.6) 350deg, transparent 360deg);
  filter:blur(9px); animation:beam-spin 2.2s linear infinite; }
@keyframes beam-spin { to { --beam-a:360deg; } }
@media (prefers-reduced-motion: reduce) { .beam-btn::before,.beam-btn::after { animation:none; background:linear-gradient(90deg,#38bdf8,#818cf8); } }
</style>

// HOW IT WORKS

01A conic-gradient with one short bright arc is masked to just the border, then its angle is animated with @property so the arc sweeps around.
02A second, blurred copy of the same gradient sits behind it to create the glowing bloom that follows the beam.
03It's pure CSS; under prefers-reduced-motion it falls back to a static gradient border.

Want a custom component for your product?

Let's build it →