<h1>It's A Button! 😬</h1>
<button class="mui-button">
  <div class="ripple"></div>
  <p>click me!</p>
</button>
@import 'bourbon';

// colors
$primary: #F85F73;
$secondary: #FBE8D3;
$acc1: #283C63;
$acc2: #928A97;
// 

@mixin center() {
  @include display(flex);
  @include flex-direction(column);
  @include justify-content(center);
  @include align-items(center);
}

body,
html {
  @include center();
  width: 100vw;
  height: 100vh;
  background: $acc2;
  overflow: hidden;
}

h1 {
  color: $secondary;
}

@keyframes fall {
  from {
    top: -10px;
    @include transform(rotate(0));
  }
  to {
    top: 110vh;
    @include transform(rotate(360deg));
  }
}

.confetti {
  @include position(absolute);
  @include transition(all 0.1s ease);
  pointer-events: none;
  width: 10px;
  height: 10px;
  font-size: 25px;
  animation: fall 2s cubic-bezier(.05,.46,1,1);//cubic-bezier(.05,.46,1,.65);
}

.mui-button {
  @mixin shadow($color: transparent, $fade: 0) {
    box-shadow: 0 0 10px 0.5px rgba($color, $fade);
  }
  @include position(relative);
  @include padding(0);
  @include margin(0);
  width: 150px;
  height: 50px;
  border: none;
  background: $primary;
  color: $secondary;
  @include shadow();
  @include transition(all 0.15s linear);
  
  &:hover {
    @include shadow(black, 0.2);
    @include transform(scale(0.98));
    background: shade($primary, 5%);
    cursor: pointer;
  }
  
  &:active,
  &:focus {
    outline: none;
  }
  
  .ripple {
    @include position(absolute);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    
    @keyframes ripple {
      from {
        @include transform(scale(0));
        opacity: 1;
      }
      to {
        opacity: 0;
        @include transform(scale(250));
      }
    }
    
    .circle {
      @include position(absolute);
      background: rgba($secondary, 0.2);
      border: 1px solid transparent;
      border-radius: 50%;
      pointer-events: none;
      animation: ripple 0.75s 1;
      top: 50%;
      left: 50%;
    }
  }

  p {
    z-index: 1;
  }
}
View Compiled
function createRipple(y, x) {
  const ripple = `<div class="circle" style="top:${y}px;left:${x}px;"></div>`;
  console.log(x);
  const _ripple = $(ripple);
  $('.ripple').append(_ripple);
  setTimeout(() => _ripple.remove(), 900);
}

function confetti() {
  [{
    bg: '#b00b00',
    position: Math.random() * $('html').width(),
  }, {
    bg: '#de1e7e',
    position: Math.random() * $('html').width(),
  }, {
    bg: '#BADA55',
    position: Math.random() * $('html').width(),
  }, {
    bg: '#F0FEAF',
    position: Math.random() * $('html').width(),
  }, {
    bg: '#ac1d1c',
    position: Math.random() * $('html').width(),
  }, {
    bg: '#facade',
    position: Math.random() * $('html').width(),
  }, {
    bg: 'transparent',
    position: Math.random() * $('html').width(),
    internal: '😜',
  }, {
    bg: 'transparent',
    position: Math.random() * $('html').width(),
    internal: '🌵',
  }, {
    bg: 'transparent',
    position: Math.random() * $('html').width(),
    internal: '🤑',
  }, {
    bg: 'transparent',
    position: Math.random() * $('html').width(),
    internal: '🐻',
  }, {
    bg: 'transparent',
    position: Math.random() * $('html').width(),
    internal: '💰',
  }, {
    bg: 'transparent',
    position: Math.random() * $('html').width(),
    internal: '🍍',
  }].map(options => {
    const c = $(`<div class="confetti" style="background:${options.bg};left:${options.position}px;">${options.internal || ''}</div>`);
    $('body').append(c);
    setTimeout(() => c.remove(), 1900);
  });
}

$('.mui-button').mousedown(e => {
  const offset = $(e.target).offset();
  createRipple(e.pageY - offset.top, e.pageX - offset.left);
  confetti();
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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