BUTTONS

Animated Border Button

A modern button with a colorful animated border and smooth hover effect. Copy the code and use it in your own project.

HTML
<button class="animated-border-btn" type="button">
  <span>Hover Me</span>
</button>
CSS
.animated-border-btn{
  position:relative;
  padding:15px 34px;
  border:0;
  border-radius:12px;
  background:#070d19;
  color:#ffffff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  isolation:isolate;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.animated-border-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  border-radius:14px;
  background:linear-gradient(
    90deg,
    #22d3ee,
    #8b5cf6,
    #d946ef,
    #22d3ee
  );
  background-size:300% 300%;
  animation:borderFlow 3s linear infinite;
}

.animated-border-btn::after{
  content:"";
  position:absolute;
  inset:2px;
  z-index:-1;
  border-radius:10px;
  background:#070d19;
}

.animated-border-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 25px rgba(139,92,246,.22);
}

@keyframes borderFlow{
  0%{
    background-position:0% 50%;
  }

  100%{
    background-position:300% 50%;
  }
}

How This Animated Border Button Works

The Animated Border Button uses layered CSS pseudo-elements to create a colorful moving border around a dark button. The HTML stays simple, using a standard button with a span for the visible text.

The main .animated-border-btn element uses position: relative and isolation: isolate so the decorative layers can sit behind the button content without affecting the text. Its dark #070d19 background keeps the center clean while the animated border remains visible around the edges.

The colorful border is created with the ::before pseudo-element. It extends slightly outside the button using inset: -2px and uses a multi-color linear gradient containing cyan, purple, and magenta tones.

The gradient is enlarged with background-size: 300% 300% and animated through the borderFlow keyframes. Over 3s, the background position moves from 0% 50% to 300% 50%, creating the continuous flowing border effect. You can learn more about CSS animations in the MDN Web Docs guide to CSS animations.

The ::after pseudo-element adds another dark layer inside the border using inset: 2px. This masks the center of the gradient, leaving only the outer edge visible like a real animated border.

On hover, the button moves upward by 2px and gains a soft purple glow with box-shadow. This adds extra depth without interfering with the continuous border animation.

Customizing This Animated Border Button

You can customize the Animated Border Button by changing a few CSS values while keeping the same HTML structure. The border colors, animation speed, thickness, button size, corner radius, and hover glow can all be adjusted to match your design.

  • Border colors: Change #22d3ee, #8b5cf6, and #d946ef inside the linear gradient.
  • Animation speed: Change 3s in the borderFlow animation to make the border move faster or slower.
  • Border thickness: Adjust inset: -2px in the ::before pseudo-element.
  • Button size: Change padding: 15px 34px to make the button smaller or larger.
  • Corner radius: Adjust the button and pseudo-element border-radius values for sharper or rounder corners.
  • Hover effect: Change translateY(-2px) or the box-shadow values to control the lift and glow strength.

Where to Use This Animated Border Button

The Animated Border Button works well when an important action needs more visual emphasis than a standard button. Its continuously moving border attracts attention while the dark center keeps the text clear and readable.

  • Call-to-action sections: Use it for actions such as “Get Started,” “Explore,” or “Join Now.”
  • Landing pages: Highlight important actions without using a large or distracting animation.
  • Portfolio websites: Use it for project links, contact buttons, or featured work.
  • Pricing sections: Add it to plan selection or signup buttons.
  • Dark-themed websites: The cyan, purple, and magenta border stands out especially well against dark backgrounds.
  • Modern UI projects: A good fit for dashboards, developer tools, and interactive web interfaces.

Because the animated effect is created entirely with CSS, the button remains lightweight and reusable without requiring JavaScript for the visual animation.

If you want another CSS-only hover style, check out the Shine Shimmer Button, which uses a moving light sweep instead of an animated gradient border.

Frequently Asked Questions

Does the Animated Border Button require JavaScript?
No. The animated border and hover effects are created entirely with CSS. JavaScript is only used for the CodeRipple copy buttons.

How is the animated border created?
The ::before pseudo-element uses a multi-color linear gradient. The borderFlow keyframes continuously change its background position, creating the moving border effect.

Can I change the colors of the animated border?
Yes. Change the cyan #22d3ee, purple #8b5cf6, and magenta #d946ef values inside the linear-gradient() to match your design.

How can I make the border animation faster or slower?
Change the 3s duration in animation: borderFlow 3s linear infinite. A smaller value makes the animation faster, while a larger value slows it down.

The Animated Border Button combines a continuously moving gradient border with a subtle hover lift and glow. Its CSS-only animation keeps the component lightweight, easy to customize, and suitable for modern websites that need an eye-catching interactive button.

Scroll to Top