<h1>Links hover animations</h1>
<div class="link-cont">
    <div class="link-wrapper">
        <a class="link hover-1" href="#">#1 - left to right</a>
    </div>
    <div class="link-wrapper">
        <a class="link hover-2" href="#">#2 center to tips</a>
    </div>
    <div class="link-wrapper">
        <a class="link hover-3" href="#">#3 left to right</a>
    </div>
    <div class="link-wrapper">
        <a class="link hover-4" href="#">#4 right to left</a>
    </div>
    <div class="link-wrapper">
        <a class="link hover-5" href="#">#5 scaling height</a>
    </div>
    <div class="link-wrapper">
        <a class="link hover-6" href="#">#6 edges to center</a>
    </div>
    <div class="link-wrapper">
        <a class="link hover-7" href="#">#7 top & bottom, left to right + reverse</a>
    </div>
    <div class="link-wrapper">
        <a class="link hover-8" href="#">#8 top & bottom, left to right</a>
    </div>
    <div class="link-wrapper">
        <a class="link hover-9" href="#">#9 top & bottom, right to left</a>
    </div>
    <div class="link-wrapper">
        <a class="link hover-10" href="#">#10 top & bottom tips to center</a>
    </div>
    <div class="link-wrapper">
        <a class="link hover-11" href="#">#11 top & bottom, scaling height</a>
    </div>
    <div class="link-wrapper">
        <a class="link hover-12" href="#">#12 top & bottom, left to right + reverse</a>
    </div>
    <div class="link-wrapper">
        <span class="inner-wrapper wrapper-13">
            <a class="link hover-13" href="#">#13 top & bottom, tips to center</a>
        </span>
    </div>
    <div class="link-wrapper">
        <span class="inner-wrapper wrapper-14">
            <a class="link hover-14" href="#">#14 square effect, center to edges</a>
        </span>
    </div>
    <div class="link-wrapper">
        <span class="inner-wrapper wrapper-15">
            <a class="link hover-15" href="#">#15 square effect, symetrical</a>
        </span>
    </div>
    <div class="link-wrapper">
        <span class="inner-wrapper wrapper-16">
            <a class="link hover-16" href="#">#16 square effect, simultaneous</a>
        </span>
    </div>
    <div class="link-wrapper">
        <span class="inner-wrapper wrapper-17">
            <a class="link hover-17" href="#">#17 square effect, side by side</a>
        </span>
    </div>
</div>
body {
    font-family: Quicksand;
    margin: 40px;
    padding: 0;
    color: #fff;
    background: linear-gradient(0,#281130 50%,#030133);
}

@red : #E2061B;
@blue: #20C2F7;
@green: #37D631;
@yellow: #ffcc00;

h1 {
    position: relative;
    font-size: 45px;
    margin: 15px 0;
    display: inline-block;
    
    &:after {
        content:'';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 2px;
        background-color: #fff;
        border-radius: 5px;
    }
}

.link-cont {
    position: relative;
    font-size: 24px;
}

.link {
    display: inline-block;
    position: relative;
    text-decoration: none;
    padding: 10px 0;
    color: #fff;
}

.link-wrapper {
    position: relative;
    display: block;
    padding: 20px 0;
}

.inner-wrapper {
    position: relative;
    display: inline-block;
}

/* hover styles */
.hover-1 {
    &:after {
        content:'';
        position: absolute;
        width: 100%;
        height: 3px;
        bottom: 0;
        left: 0;
        background-color: @red;
        transform: scaleX(0);
        transform-origin: bottom right;
        transition: transform 0.3s;
    }

    &:hover {
        &:after {
            transform-origin: bottom left;
            transform: scaleX(1);
        }
    }
}

.hover-2 { 
    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 3px;
        transform: scaleX(0);
        background-color: @blue;

        transition: transform 0.3s;
    }

    &:hover {
        &:after {
            transform: scaleX(1);    
        }
    }
}

.hover-3 { 
    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: @green;
        transform: scaleX(0);
        transform-origin: bottom left;

        transition: transform 0.3s;
    }

    &:hover {
        &:after {
            transform: scaleX(1);
        }
    }
}

.hover-4 {  
    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 3px;
        background-color: @yellow;
        transform: scaleX(0);
        transform-origin: bottom right;

        transition: transform 0.3s;
    }

    &:hover {
        &:after {
            transform: scaleX(1);
        }
    }
}

.hover-5 {
    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 3px;
        transform: scaleY(0);
        background-color: @red;

        transition: transform 0.3s;
    }

    &:hover {
        &:after {
            transform: scaleY(1);
        }
    }
}

.hover-6 {
    &:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 50%;
        height: 3px;
        background-color: @blue;
        transform: scaleX(0);
        transform-origin: bottom left;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        left : 50%;
        height: 3px;
        background-color: @blue;
        transform: scaleX(0);
        transform-origin: bottom right;

        transition: transform 0.3s;
    }

    &:hover {
        &:before {
            transform: scaleX(1);
        }

        &:after {
            transform: scaleX(1);
        }
    }
}

.hover-7 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: @green;
        transform: scaleX(0);
        transform-origin: top left;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width : 100%;
        height: 3px;
        background-color: @green;
        transform: scaleX(0);
        transform-origin: bottom right;

        transition: transform 0.3s;
    }

    &:hover {
        &:before {
            transform: scaleX(1);
        }

        &:after {
            transform: scaleX(1);
        }
    }
}

.hover-8 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: @yellow;
        transform: scaleX(0);
        transform-origin: top left;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: @yellow;
        transform: scaleX(0);
        transform-origin: top left;

        transition: transform 0.3s;
    }

    &:hover {
    &:before,
        &:after {
            transform: scaleX(1);
        }
    }
}

.hover-9 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 3px;
        background-color: @red;
        transform: scaleX(0);
        transform-origin: top right;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 3px;
        background-color: @red;
        transform: scaleX(0);
        transform-origin: top right;

        transition: transform 0.3s;
    }

    &:hover {
    &:before,
        &:after {
            transform: scaleX(1);
        }
    }
}

.hover-10 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 3px;
        background-color: @blue;
        transform: scaleX(0);

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 3px;
        background-color: @blue;
        transform: scaleX(0);

        transition: transform 0.3s;
    }

    &:hover {
    &:before,
        &:after {
            transform: scaleX(1);
        }
    }
}

.hover-11 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 3px;
        transform: scaleY(0);
        background-color: @green;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 3px;
        transform: scaleY(0);
        background-color: @green;

        transition: transform 0.2s;
    }

    &:hover {
    &:before,
        &:after {
            transform: scaleY(1);
        }
    }
}

.hover-12 {
    &:before {
        content:'';
        position: absolute;
        width: 100%;
        height: 3px;
        top: 0;
        left: 0;
        background-color: @yellow;
        transform: scaleX(0);
        transform-origin: top left;

        transition: transform 0.3s;
    }
    
    &:after {
        content:'';
        position: absolute;
        width: 100%;
        height: 3px;
        bottom: 0;
        right: 0;
        background-color: @yellow;
        transform: scaleX(0);
        transform-origin: bottom right;

        transition: transform 0.3s;
    }

    &:hover {
        &:before {
            transform-origin: top right;
            transform: scaleX(1);
        }
        
        &:after {
            transform-origin: bottom left;
            transform: scaleX(1);
        }
    }
}

.wrapper-13 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 50%;
        height: 3px;
        background-color: @red;
        transform: scaleX(0);
        transform-origin: top left;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left : 50%;
        height: 3px;
        background-color: @red;
        transform: scaleX(0);
        transform-origin: top right;

        transition: transform 0.3s;
    }

    .hover-13 {
        &:before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 50%;
            height: 3px;
            background-color: @red;
            transform: scaleX(0);
            transform-origin: bottom left;

            transition: transform 0.3s;
        }

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            left: 50%;
            height: 3px;
            background-color: @red;
            transform: scaleX(0);
            transform-origin: bottom right;

            transition: transform 0.3s;
        }
        
        &:hover {
            &:before,
            &:after {
                transform: scaleX(1);
            }
        }
    }

    &:hover {
        &:before,
        &:after {
            transform: scaleX(1);
        }
    }
}

.wrapper-14 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background-color: @blue;
        transform: scaleY(0);

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 3px;
        height: 100%;
        background-color: @blue;
        transform: scaleY(0);

        transition: transform 0.3s;
    }

    .hover-14 {
        padding: 10px;

        &:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 3px;
            background-color: @blue;
            transform: scaleX(0);

            transition: transform 0.3s;
        }

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 3px;
            background-color: @blue;
            transform: scaleX(0);

            transition: transform 0.3s;
        }
    }

    &:hover {
        &:before, 
        &:after {
            transform: scaleY(1);
        }

        .hover-14 {
            &:before,
            &:after {
                transform: scaleX(1);
            }
        }
    }
}

.wrapper-15 {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background-color: @green;
        transform: scaleY(0);
        transform-origin: top left;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 3px;
        height: 100%;
        background-color: @green;
        transform: scaleY(0);
        transform-origin: bottom right;

        transition: transform 0.3s;
    }

    .hover-15 {
        padding: 10px;

        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: @green;
            transform: scaleX(0);
            transform-origin: top left;

            transition: transform 0.3s;
        }

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 3px;
            background-color: @green;
            transform: scaleX(0);
            transform-origin: bottom right;

            transition: transform 0.3s;
        }
    }

    &:hover {
        &:before, 
        &:after {
            transform: scaleY(1);
        }

        .hover-15 {
            &:before,
            &:after {
                transform: scaleX(1);
            }
        }
    }
}

.wrapper-16 {
    &:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background-color: @yellow;
        transform: scaleY(0);
        transform-origin: bottom left;

        transition: transform 0.3s;
    }

    &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 3px;
        height: 100%;
        background-color: @yellow;
        transform: scaleY(0);
        transform-origin: top right;

        transition: transform 0.3s;
    }

    .hover-16 {
        padding: 10px;
        
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: @yellow;
            transform: scaleX(0);
            transform-origin: top left;

            transition: transform 0.3s;
        }

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 3px;
            background-color: @yellow;
            transform: scaleX(0);
            transform-origin: bottom right;

            transition: transform 0.3s;
        }
    }

    &:hover {
        &:before, 
        &:after {
            transform: scaleY(1);
        }

        .hover-16 {
            &:before,
            &:after {
                transform: scaleX(1);
            }
        }
    }
}

.wrapper-17 {
    &:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background-color: @red;
        transform: scaleY(0);
        transform-origin: bottom left;
        transition: transform 0.2s;

    }

    &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 3px;
        height: 100%;
        background-color: @red;
        transform: scaleY(0);
        transform-origin: top right;
        transition: transform 0.2s 0.2s;
    }

    .hover-17 {
        padding: 10px;

        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: @red;
            transform: scaleX(0);
            transform-origin: top left;
            transition: transform 0.2s 0.3s;
        }

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 3px;
            background-color: @red;
            transform: scaleX(0);
            transform-origin: bottom right;
            transition: transform 0.2s 0.1s;
        }
    }

    &:hover {
        &:before {
            transform: scaleY(1);
            transition: transform 0.2s 0.3s;
        } 
        
        &:after {
            transform: scaleY(1);
            transition: transform 0.2s 0.1s;
        }

        .hover-17 {
            &:before {
                transform: scaleX(1);
                transition: transform 0.2s;
            }
            
            &:after {
                transform: scaleX(1);
                transition: transform 0.2s 0.2s;
            }
        }
    }
}
View Compiled
// For more, follow me on Twitter @thomAufresne !

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.