Fireworks Button

HTML
<div class="fancy-button"> <div class="left-frills frills"></div> <div class="button">Ta Da!</div> <div class="right-frills frills"></div> </div>
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"); }); });
Expand for more options Login