How to create animated border on hover

Question

I want to create a hover effect like in this site:

http://themes.creiden.com/circleflip/blog-with-sidebar/

Just hover over the "More" link.

http://joxi.ru/uXHGU_3JTJBkDpt35Iw

So I tried to do something like this, but I have only this variant

http://jsfiddle.net/TY8CQ/

Code:

HTML

<a href="#">Click the link</a>

CSS

body{
    padding: 100px;
    background: #f6f6f6;
}


a{
    display: block;
    width: 200px;
    position: relative;
    background: #fff;
    height: 40px;
    font: 14px/40px Tahoma;
    color: #39adf0;
    text-decoration: none;
    -webkit-transition: 0.2s;
    margin: auto;
    text-align: center;
    position: relative;
}

a:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #39adf0;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;

}

a:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 0;
    background: #39adf0;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

a:hover:after{
    width: 100%;
}

a:hover:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #39adf0;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

But in the example (in the website) the stroke appears in order and in all sides... How can I do this? CSS3 only? Maybe with jQuery?

Answer 1

et voila!

You can actually get near enough using pure CSS, by using pseudo elements and animation keyframes. The benefits being reduced DOM clutter, no JS and the strict separation of concerns (sticking to CSS for styling).

Note the below example works in Chrome, add/remove the -webkit- vendor prefix as appropriate for other browsers (example for Chrome, FF).

HTML

<a href='#'>hover!</a>

CSS

a {
    background:#E32831;
    padding:10px 15px;
    display:inline-block;
    box-sizing:border-box;
    position:relative;
    overflow:hidden;
    color:white;
    transition:all 200ms ease-in;
    border-radius:5px;
    font-family:arial;
    text-decoration:none;
    font-size:12px;
}
a:before, a:after {
    display:block;
    width:100%;
    content:'';
    box-sizing:border-box;
    position:absolute;
    height:0px;
    border-radius:5px;
}
a:before {
    border-top:1px solid red;
    border-right:1px solid red;
    left:-100%;
    top:0;
    height:0px;
}
a:after {
    border-bottom:1px solid red;
    border-left:1px solid red;
    left:100%;
    bottom:0;
    height:0px;
}
@-webkit-keyframes left-up {
    0% {
        left:100%;
        height:0;
    }
    50% {
        left:0;
        height:0;
    }
    100% {
        height:100%;
        left:0;
    }
}
@-webkit-keyframes right-dn {
    0% {
        left:-100%;
        height:0;
    }
    50% {
        left:0;
        height:0;
    }
    100% {
        height:100%;
        left:0;
    }
}
a:hover {
    background:lightgrey;
    color:#808080;
}
a:hover:after, a:hover:before {
    -webkit-animation-duration:900ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards
}
a:hover:after {
    -webkit-animation-name:left-up;
}
a:hover:before {
    -webkit-animation-name:right-dn;
}

Answer 2

You can use this code, I copied from your sample website.

Here is working jsFiddle.

Demo:

a {
    float: left;
    border-radius: 5px;
    margin-top: 10px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-width: 47px;
    display: table;
    padding: 6px 9px;
    border: none;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    text-align: center;
    color: #fff;
    background-color: #E32831;
    text-decoration: none;
}
a:hover {
    background-color: #f1f1f1 !important;
}

span {
    position: relative;
    z-index: 1;
    line-height: 23px;
    transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
}
a:hover span {
    color: #5a5a5a;
}
.btnBefore, .btnAfter {
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    border: solid #e32831;
    border-width: 0;
    border-radius: 0;
    transition: 0;
    -webkit-transition: 0;
    -moz-transition: 0;
    -o-transition: 0;
    -ms-transition: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-color: #E32831;
    border-radius: 5px;
}
    a .btnBefore {
    right: 0;
    bottom: 0;
}
a .btnAfter {
    left: 0;
    top: 0;
}
a:hover .btnBefore {
    border-width: 0 0 1px 1px;
}
a:hover .btnAfter {
    border-width: 1px 1px 0 0;
}

a:hover .btnAfter, a:hover .btnBefore {
height: 100%;
width: 100%;
transition: width 0.5s ease, height 0.5s ease 0.5s, border-top-right-radius 0.1s ease 0.4s, border-bottom-left-radius 0.1s ease 0.4s, border-bottom-right-radius 0.1s ease 0.9s, border-top-left-radius 0.1s ease 0.9s;
-webkit-transition: width 0.5s ease, height 0.5s ease 0.5s, border-top-right-radius 0.1s ease 0.4s, border-bottom-left-radius 0.1s ease 0.4s, border-bottom-right-radius 0.1s ease 0.9s, border-top-left-radius 0.1s ease 0.9s;
-moz-transition: width 0.5s ease, height 0.5s ease 0.5s, border-top-right-radius 0.1s ease 0.4s, border-bottom-left-radius 0.1s ease 0.4s, border-bottom-right-radius 0.1s ease 0.9s, border-top-left-radius 0.1s ease 0.9s;
-o-transition: width 0.5s ease, height 0.5s ease 0.5s, border-top-right-radius 0.1s ease 0.4s, border-bottom-left-radius 0.1s ease 0.4s, border-bottom-right-radius 0.1s ease 0.9s, border-top-left-radius 0.1s ease 0.9s;
-ms-transition: width 0.5s ease, height 0.5s ease 0.5s, border-top-right-radius 0.1s ease 0.4s, border-bottom-left-radius 0.1s ease 0.4s, border-bottom-right-radius 0.1s ease 0.9s, border-top-left-radius 0.1s ease 0.9s;
}

<a href="#">
    <span class="text">Click the link</span>
    <span class="btnBefore"></span>
    <span class="btnAfter"></span>
</a>