Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Button Hover Draw - CSS Only
<a>
<span class="text">Hover me</span>
<span class="line -right"></span>
<span class="line -top"></span>
<span class="line -left"></span>
<span class="line -bottom"></span>
</a>
$thick : 3px;
$pad : 0.7em;
$extra : calc(#{$pad} * 1.2);
$color : #f26522;
body {
background: #2d2d2d;
}
a {
position: fixed;
cursor: pointer;
top: 50vh;
left: 50%;
color: white;
transform: translate3d(-50%,-50%,0);
padding: $pad $extra;
display: inline-block;
border: $thick solid transparent;
position: relative;
font-size: 1.5em;
letter-spacing: 0.07em;
.text {
// padding: 0 0.3em;
font-family: proxima-nova;
transform: translate3d(0,$pad,0);
display: block;
transition: transform 0.4s cubic-bezier(.2,0,0,1) 0.4s;
}
&:after {
position: absolute;
content: '';
bottom: -$thick;
left: $extra;
right: $extra;
height: $thick;
background: $color;
z-index: -1;
transition:
transform 0.8s cubic-bezier(1,0,.37,1) 0.2s,
right 0.2s cubic-bezier(.04,.48,0,1) 0.6s,
left 0.4s cubic-bezier(.04,.48,0,1) 0.6s;
transform-origin: left;
}
}
.line {
position: absolute;
background: $color;
&.-right,
&.-left {
width: $thick;
bottom: -$thick;
top: -$thick;
transform: scale3d(1,0,1);
}
&.-top,
&.-bottom {
height: $thick;
left: -$thick;
right: -$thick;
transform: scale3d(0,1,1);
}
&.-right {
right: -$thick;
transition: transform 0.1s cubic-bezier(1,0,.65,1.01) 0.23s;
transform-origin: top;
}
&.-top {
top: -$thick;
transition: transform 0.08s linear 0.43s;
transform-origin: left;
}
&.-left {
left: -$thick;
transition: transform 0.08s linear 0.51s;
transform-origin: bottom;
}
&.-bottom {
bottom: -$thick;
transition: transform 0.3s cubic-bezier(1,0,.65,1.01);
transform-origin: right;
}
}
a:hover,
a:active {
.text {
transform: translate3d(0,0,0);
transition: transform 0.6s cubic-bezier(.2,0,0,1) 0.4s;
}
&:after {
transform: scale3d(0,1,1);
right: -$thick;
left: -$thick;
transform-origin: right;
transition:
transform 0.2s cubic-bezier(1,0,.65,1.01) 0.17s,
right 0.2s cubic-bezier(1,0,.65,1.01),
left 0s 0.3s;
}
.line {
transform: scale3d(1,1,1);
&.-right {
transition: transform 0.1s cubic-bezier(1,0,.65,1.01) 0.2s;
transform-origin: bottom;
}
&.-top {
transition: transform 0.08s linear 0.4s;
transform-origin: right;
}
&.-left {
transition: transform 0.08s linear 0.48s;
transform-origin: top;
}
&.-bottom {
transition: transform 0.5s cubic-bezier(0,.53,.29,1) 0.56s;
transform-origin: left;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.