Border Draw

<!-- Border Draw — border draws itself on hover -->
<button class="nuda-border-draw">
  <span>Border Draw</span>
</button>

/* ── Border Draw ─────────────────────────────────────────────
   Four pseudo-segments animate to draw a border on hover.
   Customize:
     --nuda-bd-clr     : border & text color
     --nuda-bd-width   : border thickness
     --nuda-bd-speed   : draw duration (per side)
   ──────────────────────────────────────────────────────────── */
.nuda-border-draw {
  --nuda-bd-clr: #6366f1;
  --nuda-bd-width: 2px;
  --nuda-bd-speed: 0.25s;

  position: relative;
  display: inline-block;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--nuda-bd-clr);
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Four line segments */
.nuda-border-draw::before,
.nuda-border-draw::after {
  content: "";
  position: absolute;
  background: var(--nuda-bd-clr);
  transition: all var(--nuda-bd-speed) ease;
}

/* Top & bottom lines */
.nuda-border-draw::before {
  top: 0; left: 0;
  width: 0; height: var(--nuda-bd-width);
}
.nuda-border-draw::after {
  bottom: 0; right: 0;
  width: 0; height: var(--nuda-bd-width);
}

/* Left & right via child span */
.nuda-border-draw span {
  position: relative;
  display: inline-block;
}
.nuda-border-draw span::before,
.nuda-border-draw span::after {
  content: "";
  position: absolute;
  background: var(--nuda-bd-clr);
  transition: all var(--nuda-bd-speed) ease;
  transition-delay: var(--nuda-bd-speed);
}
.nuda-border-draw span::before {
  top: -12px; right: -32px;
  width: var(--nuda-bd-width); height: 0;
}
.nuda-border-draw span::after {
  bottom: -12px; left: -32px;
  width: var(--nuda-bd-width); height: 0;
}

/* Hover — draw all four sides */
.nuda-border-draw:hover::before { width: 100%; }
.nuda-border-draw:hover::after  { width: 100%; }
.nuda-border-draw:hover span::before { height: calc(100% + 24px); }
.nuda-border-draw:hover span::after  { height: calc(100% + 24px); }

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-border-draw::before,
  .nuda-border-draw::after,
  .nuda-border-draw span::before,
  .nuda-border-draw span::after {
    transition: none;
  }
}