Border Effect Button Animation

Border drawing effect activates when hovering over a button. SVG lines trace around the button’s border as users interact with it. For features aimed at increasing conversion rates and onsite time, creating curiosity through such effects can significantly improve these metrics. For example, if hovering over a regular button keeps users engaged for about 3 seconds, integrating this type of effect into buttons or links can increase engagement by 2 to 3 times.

HTML

CSS

:root {
    /* CSS variables for the width and height of the button */
    --button-width: 200px;
    --button-height: 60px;

/* Calculate the perimeter of the button */
    --perimeter: calc(2 * (var(--button-width) + var(--button-height)));

/* Calculate stroke-dasharray and stroke-dashoffset based on the perimeter */
    --stroke-dasharray: calc(var(--perimeter) / 4) var(--perimeter);
    --stroke-dashoffset: calc(var(--perimeter) / 4);
}

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #e55b4d;
    overflow: hidden;
}

.container {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.center {
    width: var(--button-width);
    height: var(--button-height);
    position: absolute;
}

.btn {
    width: var(--button-width);
    height: var(--button-height);
    cursor: pointer;
    background: transparent;
    border: 1px solid #d44c3e;
    outline: none;
    transition: 1s ease-in-out;
}

svg {
    position: absolute;
    left: 0;
    top: 0;
    fill: none;
    stroke: #fff;
    /* Use the calculated value from the CSS variables */
    stroke-dasharray: var(--stroke-dasharray);
    stroke-dashoffset: var(--stroke-dashoffset);
    transition: 1s ease-in-out;
}

.btn:hover {
    transition: 1s ease-in-out;
    background: #e25142;
}

.btn:hover svg {
    stroke-dashoffset: calc(-1 * var(--perimeter));
    /* Move the entire border */
}

.btn span {
    color: white;
    font-size: 18px;
    font-weight: 100;
}

JavaScript

Preview: Border Effect Button Animation

<body>

@polyxgo

PolyXGO

HTML

CSS

JavaScript

Preview: Border Effect Button Animation

About WikiPoly

Contact

HTML

CSS

JavaScript

Preview: Border Effect Button Animation

Login