Animated Border Button Template

Add a touch of elegance to your links with a button where the border animates into view on hover.

This subtle micro-interaction adds a modern and professional feel to secondary actions or navigation links without being distracting.

Get Source Code Preview

About the Animated Border Button

A simple hover effect can significantly elevate the feel of an interface. This button template moves beyond a basic color change by animating the border itself. When the user hovers over the button, lines gracefully extend from the corners to form a complete border, drawing attention to the element in a dynamic way. This effect is achieved purely with CSS, making it both lightweight and easy to implement.

Features

Elegant Corner Animation: On hover, the border lines appear to draw themselves from the corners, creating a sharp, technical animation.
Pure CSS and HTML: The entire effect is created using four CSS pseudo-elements (two on the button, two on an inner span).
Highly Customizable: Easily change the border color, animation speed, and text color via the provided CSS custom properties.
Accessible: Built on a semantic button element with a standard high-contrast focus style.

Code Breakdown

This animation uses a clever but complex technique involving four pseudo-elements. The button itself has a ::before (top border) and ::after (left border). An inner span element also has a ::before (bottom border) and ::after (right border). Each pseudo-element starts with a scale of zero on one axis (e.g., transform: scaleX(0)). On hover, they are all scaled to 1, and their transform-origin is set to different corners (e.g., left, right, top, bottom), causing the lines to expand from different directions to form the full border.

Code

Here is the complete code for the animated border button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Border Button</title>
    <style>
        /*
         Component: Animated Border Button
         Description: A button with a CSS border animation on hover.
        */

:root {
            --anim-border-color: #007bff;
            --anim-border-width: 2px;
            --anim-border-transition-speed: 0.3s;
            --btn-padding-y: 1rem;
            --btn-padding-x: 2rem;
        }

.anim-border-container-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 250px;
            background-color: #f8f9fa;
        }

.anim-border-btn-1 {
            position: relative;
            display: inline-block;
            /* Use the variables here */
            padding: var(--btn-padding-y) var(--btn-padding-x);
            font-size: 1.25rem;
            font-weight: 600;
            color: #343a40;
            background-color: transparent;
            border: none;
            cursor: pointer;
            text-decoration: none;
        }

.anim-border-btn-1 span {
            position: relative;
            z-index: 2;
        }

.anim-border-btn-1::before,
        .anim-border-btn-1::after {
            content: '';
            position: absolute;
            background: var(--anim-border-color);
            transition: transform var(--anim-border-transition-speed) ease-out;
        }

/* Top horizontal line */
        .anim-border-btn-1::before {
            top: 0;
            left: 0;
            width: 100%;
            height: var(--anim-border-width);
            transform: scaleX(0);
            transform-origin: left;
        }

/* Left vertical line */
        .anim-border-btn-1::after {
            top: 0;
            left: 0;
            width: var(--anim-border-width);
            height: 100%;
            transform: scaleY(0);
            transform-origin: top;
        }

.anim-border-btn-1 span::before,
        .anim-border-btn-1 span::after {
            content: '';
            position: absolute;
            background: var(--anim-border-color);
            transition: transform var(--anim-border-transition-speed) ease-out;
        }

/* Bottom horizontal line */
        .anim-border-btn-1 span::before {
            bottom: calc(-1 * (var(--btn-padding-y) + var(--anim-border-width)));
            left: calc(-1 * var(--btn-padding-x));
            width: calc(100% + (var(--btn-padding-x) * 2));
            height: var(--anim-border-width);
            transform: scaleX(0);
            transform-origin: right;
        }

/* Right vertical line */
        .anim-border-btn-1 span::after {
            top: calc(-1 * var(--btn-padding-y));
            right: calc(-1 * var(--btn-padding-x));
            width: var(--anim-border-width);
            height: calc(100% + (var(--btn-padding-y) * 2));
            transform: scaleY(0);
            transform-origin: bottom;
        }

.anim-border-btn-1:hover {
            color: var(--anim-border-color);
        }
        
        .anim-border-btn-1:hover::before,
        .anim-border-btn-1:hover::after,
        .anim-border-btn-1:hover span::before,
        .anim-border-btn-1:hover span::after {
             transform: scale(1,1);
        }
        
        .anim-border-btn-1:focus-visible {
            outline: 2px solid var(--anim-border-color);
            outline-offset: 4px;
        }
    </style>
</head>
<body>

<div class="anim-border-container-1">
        <button type="button" class="anim-border-btn-1">
            <span>Hover Me</span>
        </button>
    </div>

</body>
</html>

View Output