20 CSS Animated Buttons 04 / 20

CSS Animated Border Draw Button

Hover triggers a border that draws itself clockwise around the button perimeter using CSS clip-path transitions on pseudo-elements — no SVG required.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="ab-04">
  <p class="ab-04__label">Hover to draw the border</p>
  <div class="ab-04__row">
    <button class="ab-04__btn"><span>Explore Docs</span></button>
    <button class="ab-04__btn ab-04__btn--green"><span>Start Building</span></button>
    <button class="ab-04__btn ab-04__btn--rose"><span>Contact Sales</span></button>
  </div>
</div>
.ab-04,.ab-04 *,.ab-04 *::before,.ab-04 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-04 ::selection{background:#6366f1;color:#fff}
.ab-04{
  --accent:#6366f1;
  --fill-bg:#6366f1;
  font-family:system-ui,sans-serif;
  background:#09090f;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2.5rem;
  padding:2rem;
}
.ab-04__label{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#818cf8;
  opacity:.65;
}
.ab-04__row{
  display:flex;
  gap:1.25rem;
  flex-wrap:wrap;
  justify-content:center;
}
.ab-04__btn{
  position:relative;
  padding:.85rem 2.2rem;
  font-size:.95rem;
  font-weight:700;
  color:#c7d2fe;
  background:transparent;
  border:none;
  outline:none;
  cursor:pointer;
  letter-spacing:.04em;
  transition:color .4s,background .4s;
}
.ab-04__btn--green{--accent:#10b981;--fill-bg:#10b981;color:#6ee7b7}
.ab-04__btn--rose{--accent:#f43f5e;--fill-bg:#f43f5e;color:#fda4af}
.ab-04__btn span{position:relative;z-index:1}
.ab-04__btn::before,.ab-04__btn::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
}
/* top + right */
.ab-04__btn::before{
  border-top:2px solid var(--accent);
  border-right:2px solid var(--accent);
  width:0;height:0;
  transition:width .2s ease,height .2s ease .2s;
}
/* bottom + left */
.ab-04__btn::after{
  border-bottom:2px solid var(--accent);
  border-left:2px solid var(--accent);
  width:0;height:0;
  top:auto;left:auto;
  right:0;bottom:0;
  transition:width .2s ease .4s,height .2s ease .2s;
}
.ab-04__btn:hover::before{width:100%;height:100%}
.ab-04__btn:hover::after{width:100%;height:100%}
.ab-04__btn:hover{color:#fff;background:rgba(99,102,241,.12)}
.ab-04__btn--green:hover{background:rgba(16,185,129,.12)}
.ab-04__btn--rose:hover{background:rgba(244,63,94,.12)}
@media(prefers-reduced-motion:reduce){
  .ab-04__btn::before,.ab-04__btn::after{transition:none;width:100%;height:100%}
}

How this works

Two pseudo-elements (::before and ::after) each cover half the perimeter. The ::before handles the top and right edges; ::after handles the bottom and left. Both start with width: 0; height: 0 and their visible border set to 0. On :hover, a staged transition first expands width (drawing horizontal lines), then expands height (drawing vertical lines) using a transition-delay cascade — creating the sequential draw illusion across the four sides.

The inner text sits above both pseudo-elements via position: relative; z-index: 1 on a wrapper span. Colour and background transitions on the button itself happen at 0.6 s total duration, matching the border-draw sequence so the fill arrives just as the border completes. Only width, height, and border-color are transitioned — no layout repaints occur on the compositor path.

Customize

  • Speed up the draw by halving all transition-duration values on ::before and ::after (e.g. from .25s to .12s).
  • Change the border colour by updating --accent — the border-color on both pseudo-elements derives from this variable.
  • Make the fill darker by editing --fill-bg on the button; a linear-gradient value works here to create a gradient fill on draw completion.
  • Reverse the draw direction by swapping border-top with border-bottom and border-right with border-left on the two pseudo-elements.
  • Thicken the drawn border by increasing the border-width on each pseudo-element from 2px to 3px or 4px.

Watch out for

  • This technique uses width and height transitions which cause layout recalculations — keep the button out of large flex/grid reflow containers to minimise paint cost.
  • The corner seam between pseudo-elements can show a 1px gap on high-DPI displays on certain browsers; nudge the inset values by -0.5px to close it.
  • Firefox occasionally renders the width/height transition less smoothly than Chromium — add transform: translateZ(0) on the pseudo-elements to promote them to GPU layers.

Browser support

ChromeSafariFirefoxEdge
49+ 9+ 44+ 49+

Relies on CSS transitions and pseudo-elements — universally supported in modern browsers.

More from 20 CSS Animated Buttons

CSS Pure CSS Ripple Effect ButtonCSS 3D Press Effect ButtonCSS Liquid Fill Button AnimationCSS Moving Gradient CTA ButtonCSS Shine Sweep Hover ButtonCSS Jelly Bounce Button AnimationCSS Text Flip Button HoverCSS Animated CTA Hero ButtonCSS Submit Button Success StateCSS Animated Download ButtonCSS Hamburger To Close ButtonCSS Add To Cart Button Animation
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →