<div class="fancy-button">
  <div class="left-frills frills"></div>
  <div class="button">Ta Da!</div>
  <div class="right-frills frills"></div>
</div>
$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;
  }
}
View Compiled
$(function(){
  $(".fancy-button").mousedown(function(){
    $(this).bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){
        $(this).removeClass('active');
    })
     $(this).addClass("active");
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js