Aura Border Trace Button - Free UI Component

Initial Border #334155

Trace Color #818cf8

Text Color #ffffff

Button Label Trace Border

Trace Speed (s) 0.6

Rounding (px) 8

Vertical Padding (rem) 1

Horizontal Padding (rem) 2.5

Font Size (rem) 1.1

Aura Border Trace Button

A sophisticated interaction button featuring an SVG path that 'traces' the button's perimeter on hover. Perfect for focal action points that need a refined, high-tech animated feedback.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Animation Button</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap" rel="stylesheet">
    <style>
        /* -- Variables ------------------------------------------------- */
        :root {
            --base: {{baseColor}};               /* Base Border */
            --accent: {{accentColor}};           /* Trace Color */
            --text: {{textColor}};               /* Text Color */
            --radius: {{borderRadius}}px;        /* Corner Style */
            --v-pad: {{vPadding}}rem;            /* Vertical Tightness */
            --h-pad: {{hPadding}}rem;            /* Horizontal Space */
            --font-size: {{fontSize}}rem;        /* Typography Size */
            --speed: {{traceSpeed}}s;            /* Animation Duration */
            --page-bg: #0f172a;
        }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--page-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

/* -- Button Implementation --------------------------------------- */
        .btn-border-trace {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: var(--v-pad) var(--h-pad);
            font-size: var(--font-size);
            font-weight: 700;
            color: var(--text);
            background: transparent;
            border: 2px solid var(--base);
            border-radius: var(--radius);
            cursor: pointer;
            text-decoration: none;
            transition: all 0.3s ease;
            letter-spacing: -0.01em;
            outline: none;
        }

/* The Trace Path Overlay - Perfectly aligned to button edges */
        .btn-border-trace svg {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            fill: none;
            pointer-events: none;
            overflow: visible; /* Allows stroke to bleed outside if needed */
        }

.btn-border-trace svg rect {
            width: 100%;
            height: 100%;
            fill: none;
            stroke: var(--accent);
            stroke-width: 4;
            /* Using pathLength="1" allows us to use 0-1 for dash offsets regardless of button size */
            pathLength: 1; 
            stroke-dasharray: 1;
            stroke-dashoffset: 1;
            transition: stroke-dashoffset var(--speed) cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
            rx: var(--radius); /* Rounded rect matches button rounding exactly */
        }

/* Hover Dynamics */
        .btn-border-trace:hover {
            color: var(--accent);
            border-color: transparent;
            /* Subtle glow for the trace */
            filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent), transparent 50%));
        }

.btn-border-trace:hover svg rect {
            stroke-dashoffset: 0;
        }

.btn-border-trace:active {
            transform: scale(0.97);
        }

</style>
</head>
<body>

<button class="btn-border-trace">
        <svg>
            <rect x="0" y="0" width="100%" height="100%" pathLength="1"></rect>
        </svg>
        {{buttonText}}
    </button>

</body>
</html>