SCSS
$button-width:150px;
$button-height:65px;
$button-color:lighten(crimson,5%);
$button-font-size: 1.9em;
$frill-vert-space:45px; //vertical spacing between frills
$frill-horizontal-offset:14px; //initial offset
$frill-distance:80px; //distance moved by frills
$frill-stagger: 15px; //distance between center and edge frills
$frill-rotation:34deg;
$frill-height:8px;
$frill-width: 38px;
$speed:0.38s;
$timing-function:ease-out;
body, html {
height:100%;
}
body {
margin: 0;
display:flex;
background:#FFDC52;
}
.button {
background:$button-color;
border-radius:5px;
color:white;
cursor:pointer;
font-family:Roboto;
font-size:$button-font-size;
height:$button-height;
letter-spacing:.2px;
line-height:$button-height;
text-align:center;
text-transform:uppercase;
user-select:none;
width:$button-width;
&:hover {
background:lighten($button-color,4%);
}
&:active {
box-shadow:inset 0px 2px 8px -1px darken($button-color,6%);
}
}
.fancy-button {
margin:auto;
position:relative;
}
.frills, .frills:after, .frills:before {
position:absolute;
background:$button-color;
border-radius:($frill-height/2);
height:$frill-height;
}
.frills:after, .frills:before, {
content:"";
display:block;
}
.frills:before {
bottom:$frill-vert-space;
}
.frills:after {
top:$frill-vert-space;
}
.left-frills {
right:$button-width + $frill-horizontal-offset;
top:($button-height/2)-($frill-height/2);
.active & {
animation: move-left $speed $timing-function, width-to-zero $speed $timing-function;
}
&:before, &:after {
left:$frill-stagger;
}
&:before {
.active & {
animation: width-to-zero $speed $timing-function, move-up $speed $timing-function;
}
}
&:after {
.active & {
animation: width-to-zero $speed $timing-function, move-down $speed $timing-function;
}
}
}
.right-frills {
left:$button-width + $frill-horizontal-offset;
top:($button-height/2)-($frill-height/2);
.active & {
animation: move-right $speed $timing-function, width-to-zero $speed $timing-function;
}
&:before, &:after {
right:$frill-stagger;
}
&:before {
.active & {
animation: width-to-zero $speed $timing-function, move-up $speed $timing-function;
}
}
&:after {
.active & {
animation: width-to-zero $speed $timing-function, move-down $speed $timing-function;
}
}
}
.left-frills:before, .right-frills:after {
transform:rotate($frill-rotation)
}
.left-frills:after, .right-frills:before {
transform:rotate(- $frill-rotation);
}
@keyframes move-left {
0% {
transform:none;
}
65% {
transform: translateX(-1*$frill-distance);
}
100% {
transform: translateX(-1*$frill-distance);
}
}
@keyframes move-right {
0% {
transform:none;
}
65% {
transform: translateX($frill-distance);
}
100% {
transform: translateX($frill-distance);
}
}
@keyframes width-to-zero {
0% {
width:$frill-width;
}
100% {
width:$frill-height;
}
}
@keyframes move-up {
0% {
}
100% {
bottom:$frill-vert-space*1.55;
}
}
@keyframes move-down {
0% {
}
100% {
top:$frill-vert-space*1.55;
}
}
JAVASCRIPT
$(function(){
$(".fancy-button").mousedown(function(){
$(this).bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){
$(this).removeClass('active');
})
$(this).addClass("active");
});
});
