Border Draw

<button class="nuda-btn-border-draw">
  <span>Border Draw</span>
</button>

/* Border Draw — two L-shaped pseudo-borders unveil via clip-path on hover. */
.nuda-btn-border-draw {
  position: relative;
  padding: 12px 30px;
  background: #0c0c10;
  color: #fafafa;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.nuda-btn-border-draw::before,
.nuda-btn-border-draw::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
}

/* top + right corner, revealed first */
.nuda-btn-border-draw::before {
  border-top: 2px solid #e4ff54;
  border-right: 2px solid #e4ff54;
  clip-path: inset(0 0 100% 100%);
  transition: clip-path 0.3s ease 0.15s;
}

/* bottom + left corner */
.nuda-btn-border-draw::after {
  border-bottom: 2px solid #e4ff54;
  border-left: 2px solid #e4ff54;
  clip-path: inset(100% 100% 0 0);
  transition: clip-path 0.3s ease;
}

.nuda-btn-border-draw:hover::before,
.nuda-btn-border-draw:hover::after {
  clip-path: inset(0 0 0 0);
}

.nuda-btn-border-draw:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-btn-border-draw::before,
  .nuda-btn-border-draw::after { transition: none; }
}