May 10, 2022

Button Border Animation

CSS 730 views
<br>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Border Animation Effect</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body { background-color: #383838; }

        section {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        button[type=button] {
            position: relative;
            padding: 15px 30px;
            font-size: 18px;
            color: #919191;
            border: none;
            background-color: transparent;
            transition: 1s all ease-in-out;
        }

        button[type=button] svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        button[type=button] svg rect {
            fill: none;
            stroke: #5c5c5c;
            stroke-width: 5px;
            stroke-linecap: round;
        }

        button[type=button] svg rect.brdFrame {
            stroke: #fff;
            stroke-dasharray: 40 420;
            stroke-dashoffset: 40;
            transition: 1s all ease-in-out;
        }

        button[type=button]:hover {
            color: #fff;
        }

        button[type=button]:hover svg rect.brdFrame {
            stroke-dashoffset: -420;
        }
        
    </style>
</head>
<body>
    <section>
        <button type="button">
            <svg>
                <rect x="0" y="0" rx="10px" ry="10px" width="100%" height="100%" />
                <rect class="brdFrame" x="0" y="0" rx="10px" ry="10px" width="100%" height="100%" />
            </svg>
            Hover Me!
        </button>
    </section>
</body>
</html>
Result Screenshot(s)

Author: Geekboots