Based on http://codepen.io/thomasvaeth/pen/JKxRNk
A Pen by Jens Grochtdreis on CodePen.
<a class="btn-draw" href="#"> | |
<span>Click Me!</span> | |
</a> | |
<button class="btn-draw" type="button"> | |
<span>Click Me!</span> | |
</button> |
// Color variables | |
$color-blue: #324577; | |
$color-grey: #e4e4e2; | |
$btn-background: #fff; | |
// Mixin for drawing button with optional argument for width, padding, and time | |
@mixin btn-draw($color, $color-hov, $width: 1px, $padding: 0.5em, $time: 0.2s) { | |
position: relative; | |
display: inline-block; | |
background-color: $btn-background; | |
color: $color; | |
border: none; | |
border-bottom: $width solid $color; | |
cursor: pointer; | |
overflow: hidden; | |
padding: 0; | |
transition: color $time ease-in-out, background-color $time ease-in-out; | |
&:after { | |
content: ''; | |
position: absolute; | |
right: 0; | |
bottom: 0; | |
height: 100%; | |
width: $width; | |
background: $color; | |
transform: translateY(100%); | |
transition: transform $time ease-in-out; | |
transition-delay: $time * 3; | |
} | |
> span { | |
position: relative; | |
display: block; | |
padding: $padding; | |
color: inherit; | |
&:before, | |
&:after { | |
content: ''; | |
position: absolute; | |
left: 0; | |
top: 0; | |
background: $color; | |
transition: transform $time ease-in-out; | |
} | |
&:before { | |
height: $width; | |
width: 100%; | |
transform: translateX(100%); | |
transition-delay: $time * 2; | |
} | |
&:after { | |
height: 100%; | |
width: $width; | |
transform: translateY(-100%); | |
transition-delay: $time; | |
} | |
} | |
&:hover:after, | |
&:hover > span:before, | |
&:hover > span:after { | |
transform: translate(0, 0); | |
} | |
&:hover:after { | |
transition-delay: 0s; | |
} | |
&:hover > span:before { | |
transition-delay: $time; | |
} | |
&:hover > span:after { | |
transition-delay: $time * 2; | |
} | |
&:hover, &:focus { | |
color: $color-hov; | |
background-color: $color; | |
transition-delay: $time * 3; | |
} | |
} | |
.btn-draw { | |
font-size: 2em; | |
text-transform: uppercase; | |
text-decoration: none; | |
letter-spacing: 0.1em; | |
@include btn-draw($color-blue, $color-grey, 2px); | |
} | |
// only for demonstration | |
.btn-draw { | |
margin-right: 20px; | |
} |
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/basics-4.css" rel="stylesheet" /> |