Sat Jun 25 2022

Anchor Border Hover Animation

CSS5131 views

File Name: anchor-border-hover-animation.html

<!DOCTYPE html>
<html lang="en">
    <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>Anchor Border Animation on Hover</title>
    <link rel="preconnect" href="">
    <link rel="preconnect" href="" crossorigin>
    <link href="" rel="stylesheet"> 
        * {
            margin: 0;
            padding: 0;
            font-family: 'Hind', sans-serif;

        body {
            background-color: #101820ff;

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

        a {
            position: relative;
            display: block;
            width: 200px;
            height: 40px;
            text-decoration: none;

        a:hover {
            animation: glow 0.2s 0.5s ease-in-out forwards;

        a svg,
        a svg rect {
            width: 200px;
            height: 40px;

        a svg rect {
            stroke: #fee715;
            stroke-width: 5px;
            fill: transparent;
            stroke-dasharray: 100 320;
            stroke-dashoffset: -274;
            stroke-linecap: round;
            transition: 0.5s all ease;

        a:hover svg rect {
            stroke-dasharray: 500;
            stroke-dashoffset: 0;

        a span {
            font-size: 22px;
            position: absolute;
            top: 8%;
            left: 0;
            right: 0;
            text-align: center;
            color: #fff;

        @keyframes glow {
            from {
                box-shadow: 0 0 0px 0 #fee71500;
            to {
                box-shadow: 0 0 10px 0 #fee715ff;
        <a href="">
                <rect rx="8px" ry="8px"></rect>

Result Screenshot(s)

Anchor Border Hover AnimationWorking Sample0

We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.