<h1>Hover Border Animation</h1>
<p>-- Hover and Fun! --</p>
<div class="button">
<a href="#">
<p>Hover me</p>
<div class="hoverBtn"></div>
<div class="hoverBtn-bottom"></div>
</a>
</div>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
//variables for customization
$duration: 0.4s;
$border-size: 2px;
$border-color: #517180;
$button-width: 200px;
$button-height: 55px;
$size-radius: 5px;
$mainFont: 'Montserrat', sans-serif;
//------------------------------------------------------------------
@mixin border-radius($size-radius, $sideH) {
@if $sideH != 'all' {
-webkit-border-top-#{$sideH}-radius: $size-radius;
-moz-border-top-#{$sideH}-radius: $size-radius;
border-top-#{$sideH}-radius: $size-radius;
-webkit-border-bottom-#{$sideH}-radius: $size-radius;
-moz-border-bottom-#{$sideH}-radius: $size-radius;
border-bottom-#{$sideH}-radius: $size-radius;
} @else if $sideH == 'all' {
-webkit-border-radius: $size-radius;
-moz-border-radius: $size-radius;
border-radius: $size-radius;
}
}
@mixin sub-button {
position: absolute;
content: '';
height: 0;
width: 0;
display: block;
opacity: 0;
}
h1 {
font-family: $mainFont;
text-align: center;
padding-top: 20px;
color: #000;
}
p {
text-align: center;
font-family: $mainFont;
color: #999;
}
.button {
width: $button-width;
margin: 100px auto;
position: relative;
border: solid 2px #cbd4d9;
height: $button-height;
@include border-radius($size-radius, 'all');
&:hover .hoverBtn:before,
&:hover .hoverBtn:after {
opacity: 1;
-webkit-animation: open $duration;
/* Chrome, Safari, Opera */
animation: open $duration;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
animation-direction: normal;
}
&:hover .hoverBtn-bottom:before,
&:hover .hoverBtn-bottom:after {
opacity: 1;
-webkit-animation: openB $duration;
/* Chrome, Safari, Opera */
animation: openB $duration;
animation-delay: $duration;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
animation-direction: normal;
}
p {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
color: #587785;
font-family: 'Source Sans Pro', sans-serif;
font-size: 22px;
line-height: $button-height;
}
}
.hoverBtn {
width: 100%;
height: $button-height;
position: absolute;
top: -1px;
&:before {
@include sub-button;
border-top: solid $border-size $border-color;
border-left: solid $border-size $border-color;
@include border-radius($size-radius, 'left');
right: $button-width/2;
}
&:after {
@include sub-button;
border-top: solid $border-size $border-color;
border-right: solid $border-size $border-color;
@include border-radius($size-radius, 'right');
left: $button-width/2;
}
}
.hoverBtn-bottom {
width: 100%;
height: $button-height;
position: absolute;
&:before {
@include sub-button;
height: $button-height;
border-bottom: solid $border-size $border-color;
@include border-radius($size-radius, 'right');
right: 0;
}
&:after {
@include sub-button;
height: $button-height;
border-bottom: solid $border-size $border-color;
@include border-radius($size-radius, 'left');
left: 0;
}
}
p.credits {
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
color: #888;
font-size: 16px;
}
@keyframes open {
0% {
width: 0;
height: 0;
}
50% {
width: $button-width/2;
height: 0;
}
100% {
width: $button-width/2;
height: $button-height;
}
}
@keyframes openB {
0% {
width: 0px;
}
100% {
width: $button-width/2;
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.