Animated Border and Glow Effect: How to Code an Ultra-Fast Premium Button

Website design should never slow down the user. A button is the most critical element for conversion. If it looks good, users want to click. If it is fast, users feel confident.

Often, light effects (Glow) require many computer resources. If the code is poorly written, the animation stutters. We will see how to create a rotating luminous border. This code uses only CSS to remain ultra-performant.

#The Problem with Poorly Designed Buttons

Many developers make the mistake of using images or JavaScript to make a button shine. This causes three problems:

1. Weight: An animated image is heavy to download.
2. Readability: If the effect passes in front of the text, it becomes unreadable.
3. Slowness: JavaScript uses the browser’s main processor.

Our solution uses hardware rendering. This means the work is done by the graphics card (GPU). The main processor (CPU) remains free for other site tasks.

#HTML Structure: Simplicity and Efficiency

For the browser to work fast, it needs simple code. We use a box (div or button) and a container for the text. This allows the visual effect to be separated from the actual content.

Copy
<div class=box>
  <div class=content>
    <h1>Glowing border</h1>
    <p>Hover your mouse to animate the border</p>
  </div>
</div>

Here, we do not use quotes for simple classes like class=box. This is an optimization that slightly reduces the HTML file size. Modern browsers understand this code perfectly.

#Step 1: Declaring an Intelligent Variable

In CSS, we often use variables. But here, we use a “typed” variable. We tell the browser that --angle is a unit of rotation measurement.

Copy@property --angle {
  syntax        : "<angle>";
  initial-value : 76deg;
  inherits      : false;
}

Why is this important? Without this, the browser does not know how to smoothly transition from 0 to 360 degrees. Thanks to @property, the animation is handled mathematically. This allows for 120 frames per second without any effort.

#Step 2: Fluid Design with clamp and min

We want our box to look good everywhere. We do not use fixed sizes in pixels. Instead, we use min() and clamp() functions.

Copy.box {
  position    : relative;
  display     : grid;
  place-items : center;
  /* Width adapts between 90% on mobile and 25rem on desktop */
  width       : min(90vw, 25rem);
  height      : auto;
  background  : #012;
  /* Fluid spacing */
  padding     : clamp(.625rem, calc(1.136vw + .3978rem), 1.25rem);
  margin      : 1.25rem;
}

clamp() automatically calculates the best size. There is no need for complex rules for mobile phones. This is a win for performance and code maintenance.

#Step 3: Creating Light Layers

We use two invisible layers behind the box: ::before and ::after. The secret is to use a conic gradient.

1. The ::before layer: This is the sharp border. It is placed right behind the background.
2. The ::after layer: This is the glowing halo. It is placed even further back (z-index: -2) and is blurred.

Copy.box::before, .box::after {
  content    : "";
  position   : absolute;
  inset      : -3px; /* Border thickness */
  z-index    : -1;
  background : conic-gradient(from var(--angle), #56e0a6, #060c21, #11b9d1, #060c21, #56e0a6);
}

.box::after {
  z-index : -2;
  filter  : blur(20px);
}

By using inset: -3px, we ask the gradient to slightly overlap the box. This creates the colored border.

#Step 4: Interaction and Animation

The effect only activates when the user hovers over the box. This saves energy. We use two animations at the same time. The first rotates the angle. The second adds a sepia filter to make the light more intense.

Copy&:hover::before, &:hover::after {
  animation : glowing-border 3.5s linear infinite;
}

&:hover::after {
  animation-name : glowing-border, blur-effect;
}

@keyframes glowing-border {
  to { --angle : 436deg }
  /* 76deg + 360deg for a full rotation */
}

@keyframes blur-effect {
  to { filter : blur(15px) sepia(.3) }
}

The sepia filter is very clever. It slightly changes the hue of the colors. This gives a more “vivid” and warm look to the button during clicks or hovers.

#Why is this Technique the Fastest?

There are several ways to draw a border. But most of them force the browser to recalculate the page’s shape. This is called Layout Shift.

Our method uses only the final Rendering Process (Composite). Since we only modify one variable (--angle) and one filter (blur), the browser does not redo position calculations. This is the least tiring method for the computer.

#SEO Impact and Core Web Vitals

SEO is not just text. It is also the technical quality of your components. Here is how this button helps your ranking:

1. LCP (Largest Contentful Paint): The button is lightweight. It does not block the display of the rest of the page.
2. INP (Interaction to Next Paint): The hover response is instantaneous because it is handled by the GPU. Google loves fast interactions.
3. CLS (Cumulative Layout Shift) : By using aspect-ratio or calculated sizes (height: auto), content does not jump during loading.

#Accessibility: Readability and Movement

A button must be readable for everyone. In our example, the text is in a separate layer (.content). It always remains white on a dark background. The contrast is excellent, which is vital for visually impaired users.

We must also think of people sensitive to movement. Some people may feel dizzy with rotating lights. CSS allows us to automatically disable the animation for them.

Copy@media (prefers-reduced-motion : reduce) {
  .box::before, .box::after {
    animation  : none;
    background : #11b9d1; /* A fixed and calm border */
  }
}

#Performance Optimization: Avoiding Overrides

In our code, we do not use complicated selectors. We use CSS nesting (&::before). This allows the browser to read the code faster. If you need multiple variants, use :not(). For example: .box:not(.no-animation). This avoids forcing the browser to cancel styles that have already been calculated.

#Conclusion: The Power of Modern CSS

Creating “Premium” interfaces does not require heavy libraries. With a few well-thought-out lines of CSS, you get:

• Fluid animation at 120 FPS.
• A perfect performance score on Lighthouse.
• A pleasant and interactive user experience.

Performance is not the enemy of design. It is the engine that allows design to be appreciated by everyone. Every millisecond of calculation saved is a victory for your SEO and the planet.

Frequently Asked Questions (FAQ)

Lionel Péramo

Web Performance & Eco-design Expert

Full Stack Developer and creator of the OTRA framework (PHP) and EcoComposer library. I write to make the web faster and more inclusive.

About me →