<!--
Youtube Tutorial
Online Tutorials Channel
Cool CSS Border Animation - CSS3 Hover Effects
-->
<div class="center">
<a href="#">COOL</a>
</div>
body {
margin: 0;
padding: 0;
background: #f1ff36;
font-family: verdana;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
position: relative;
text-decoration: none;
/* border: 2px solid #f00; */
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
display: inline-block;
font-size: 25px;
color: #262626;
}
a:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
/* width: 100%;
height: 100%; */
width: 0;
height: 0;
background: transparent;
/* border: 2px solid #262626; */
border: 2px solid transparent;
}
a:hover:before {
animation: animate-border 1s linear forwards;
}
@keyframes animate-border {
0% {
width: 0;
height: 0;
/* border: 2px solid transparent; */
border-top-color: #262626;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {
width: 100%;
height: 0;
/* border: 2px solid #262626; */
border-top-color: #262626;
border-right-color: #262626;
border-bottom-color: transparent;
border-left-color: transparent;
}
100% {
width: 100%;
height: 100%;
/* border: 2px solid #262626; */
border-top-color: #262626;
border-right-color: #262626;
border-bottom-color: transparent;
border-left-color: transparent;
}
}
/*****************************/
a:after {
content: '';
position: absolute;
top: -2px;
left: -2px;
/* width: 100%;
height: 100%; */
width: 0;
height: 0;
background: transparent;
/* border: 2px solid #262626; */
border: 2px solid transparent;
}
a:hover:after {
animation: animate-border-2 1s linear forwards;
animation-delay: 1s;
}
@keyframes animate-border-2 {
0% {
width: 0;
height: 0;
/* border: 2px solid transparent; */
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: #262626;
}
50% {
width: 0;
height: 100%;
/* border: 2px solid #262626; */
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #262626;
border-left-color: #262626;
}
100% {
width: 100%;
height: 100%;
/* border: 2px solid #262626; */
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #262626;
border-left-color: #262626;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.