17+ JavaScript Button Examples

This post contains a total of 17+ Hand-Picked JavaScript Button Examples with Source Code. All the Buttons are made using JavaScript & Styled using CSS.

You can use the source code of these examples for educational purpose with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By Andreas Storm

Made by Andreas Storm. JavaScript Button with Liquid animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<style>
body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  display: grid;
  background: black;
}

.liquid-button {
  margin: auto;
  font-weight: bold;
}
.liquid-button path {
  cursor: pointer;
}
</style>
</head>
<body>
<svg class="liquid-button"
     data-text="Yeah, I want that"
     data-force-factor="0.1"
     data-layer-1-viscosity="0.5"
     data-layer-2-viscosity="0.4"
     data-layer-1-mouse-force="400"
     data-layer-2-mouse-force="500"
     data-layer-1-force-limit="1"
     data-layer-2-force-limit="2"
     data-color1="#FFF500"
     data-color2="#20D8F9"
     data-color3="#20D8F9">
</svg>
      <script>
const LiquidButton = class LiquidButton {
  constructor(svg) {
    const options = svg.dataset;
    this.id = this.constructor.id || (this.constructor.id = 1);
    this.constructor.id++;
    this.xmlns = 'http://www.w3.org/2000/svg';
    this.tension = options.tension * 1 || 0.4;
    this.width = options.width * 1 || 200;
    this.height = options.height * 1 || 50;
    this.margin = options.margin || 40;
    this.hoverFactor = options.hoverFactor || -0.1;
    this.gap = options.gap || 5;
    this.debug = options.debug || false;
    this.forceFactor = options.forceFactor || 0.2;
    this.color1 = options.color1 || '#36DFE7';
    this.color2 = options.color2 || '#8F17E1';
    this.color3 = options.color3 || '#BF09E6';
    this.textColor = options.textColor || '#000000';
    this.text = options.text || 'Button';
    this.svg = svg;
    this.layers = [{
      points: [],
      viscosity: 0.5,
      mouseForce: 100,
      forceLimit: 2 },
    {
      points: [],
      viscosity: 0.8,
      mouseForce: 150,
      forceLimit: 3 }];

    for (let layerIndex = 0; layerIndex < this.layers.length; layerIndex++) {
      const layer = this.layers[layerIndex];
      layer.viscosity = options['layer-' + (layerIndex + 1) + 'Viscosity'] * 1 || layer.viscosity;
      layer.mouseForce = options['layer-' + (layerIndex + 1) + 'MouseForce'] * 1 || layer.mouseForce;
      layer.forceLimit = options['layer-' + (layerIndex + 1) + 'ForceLimit'] * 1 || layer.forceLimit;
      layer.path = document.createElementNS(this.xmlns, 'path');
      this.svg.appendChild(layer.path);
    }
    this.wrapperElement = options.wrapperElement || document.body;
    if (!this.svg.parentElement) {
      this.wrapperElement.append(this.svg);
    }

    this.svgText = document.createElementNS(this.xmlns, 'text');
    this.svgText.setAttribute('x', '50%');
    this.svgText.setAttribute('y', '50%');
    this.svgText.setAttribute('dy', ~~(this.height / 8) + 'px');
    this.svgText.setAttribute('font-size', ~~(this.height / 3));
    this.svgText.style.fontFamily = 'sans-serif';
    this.svgText.setAttribute('text-anchor', 'middle');
    this.svgText.setAttribute('pointer-events', 'none');
    this.svg.appendChild(this.svgText);

    this.svgDefs = document.createElementNS(this.xmlns, 'defs');
    this.svg.appendChild(this.svgDefs);

    this.touches = [];
    this.noise = options.noise || 0;
    document.body.addEventListener('touchstart', this.touchHandler);
    document.body.addEventListener('touchmove', this.touchHandler);
    document.body.addEventListener('touchend', this.clearHandler);
    document.body.addEventListener('touchcancel', this.clearHandler);
    this.svg.addEventListener('mousemove', this.mouseHandler);
    this.svg.addEventListener('mouseout', this.clearHandler);
    this.initOrigins();
    this.animate();
  }

  get mouseHandler() {
    return e => {
      this.touches = [{
        x: e.offsetX,
        y: e.offsetY,
        force: 1 }];

    };
  }

  get touchHandler() {
    return e => {
      this.touches = [];
      const rect = this.svg.getBoundingClientRect();
      for (let touchIndex = 0; touchIndex < e.changedTouches.length; touchIndex++) {
        const touch = e.changedTouches[touchIndex];
        const x = touch.pageX - rect.left;
        const y = touch.pageY - rect.top;
        if (x > 0 && y > 0 && x < this.svgWidth && y < this.svgHeight) {
          this.touches.push({ x, y, force: touch.force || 1 });
        }
      }
      e.preventDefault();
    };
  }

  get clearHandler() {
    return e => {
      this.touches = [];
    };
  }

  get raf() {
    return this.__raf || (this.__raf = (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function (callback) {setTimeout(callback, 10);}).
    bind(window));
  }

  distance(p1, p2) {
    return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
  }

  update() {
    for (let layerIndex = 0; layerIndex < this.layers.length; layerIndex++) {
      const layer = this.layers[layerIndex];
      const points = layer.points;
      for (let pointIndex = 0; pointIndex < points.length; pointIndex++) {
        const point = points[pointIndex];
        const dx = point.ox - point.x + (Math.random() - 0.5) * this.noise;
        const dy = point.oy - point.y + (Math.random() - 0.5) * this.noise;
        const d = Math.sqrt(dx * dx + dy * dy);
        const f = d * this.forceFactor;
        point.vx += f * (dx / d || 0);
        point.vy += f * (dy / d || 0);
        for (let touchIndex = 0; touchIndex < this.touches.length; touchIndex++) {
          const touch = this.touches[touchIndex];
          let mouseForce = layer.mouseForce;
          if (
          touch.x > this.margin &&
          touch.x < this.margin + this.width &&
          touch.y > this.margin &&
          touch.y < this.margin + this.height)
          {
            mouseForce *= -this.hoverFactor;
          }
          const mx = point.x - touch.x;
          const my = point.y - touch.y;
          const md = Math.sqrt(mx * mx + my * my);
          const mf = Math.max(-layer.forceLimit, Math.min(layer.forceLimit, mouseForce * touch.force / md));
          point.vx += mf * (mx / md || 0);
          point.vy += mf * (my / md || 0);
        }
        point.vx *= layer.viscosity;
        point.vy *= layer.viscosity;
        point.x += point.vx;
        point.y += point.vy;
      }
      for (let pointIndex = 0; pointIndex < points.length; pointIndex++) {
        const prev = points[(pointIndex + points.length - 1) % points.length];
        const point = points[pointIndex];
        const next = points[(pointIndex + points.length + 1) % points.length];
        const dPrev = this.distance(point, prev);
        const dNext = this.distance(point, next);

        const line = {
          x: next.x - prev.x,
          y: next.y - prev.y };

        const dLine = Math.sqrt(line.x * line.x + line.y * line.y);

        point.cPrev = {
          x: point.x - line.x / dLine * dPrev * this.tension,
          y: point.y - line.y / dLine * dPrev * this.tension };

        point.cNext = {
          x: point.x + line.x / dLine * dNext * this.tension,
          y: point.y + line.y / dLine * dNext * this.tension };

      }
    }
  }

  animate() {
    this.raf(() => {
      this.update();
      this.draw();
      this.animate();
    });
  }

  get svgWidth() {
    return this.width + this.margin * 2;
  }

  get svgHeight() {
    return this.height + this.margin * 2;
  }

  draw() {
    for (let layerIndex = 0; layerIndex < this.layers.length; layerIndex++) {
      const layer = this.layers[layerIndex];
      if (layerIndex === 1) {
        if (this.touches.length > 0) {
          while (this.svgDefs.firstChild) {
            this.svgDefs.removeChild(this.svgDefs.firstChild);
          }
          for (let touchIndex = 0; touchIndex < this.touches.length; touchIndex++) {
            const touch = this.touches[touchIndex];
            const gradient = document.createElementNS(this.xmlns, 'radialGradient');
            gradient.id = 'liquid-gradient-' + this.id + '-' + touchIndex;
            const start = document.createElementNS(this.xmlns, 'stop');
            start.setAttribute('stop-color', this.color3);
            start.setAttribute('offset', '0%');
            const stop = document.createElementNS(this.xmlns, 'stop');
            stop.setAttribute('stop-color', this.color2);
            stop.setAttribute('offset', '100%');
            gradient.appendChild(start);
            gradient.appendChild(stop);
            this.svgDefs.appendChild(gradient);
            gradient.setAttribute('cx', touch.x / this.svgWidth);
            gradient.setAttribute('cy', touch.y / this.svgHeight);
            gradient.setAttribute('r', touch.force);
            layer.path.style.fill = 'url(#' + gradient.id + ')';
          }
        } else {
          layer.path.style.fill = this.color2;
        }
      } else {
        layer.path.style.fill = this.color1;
      }
      const points = layer.points;
      const commands = [];
      commands.push('M', points[0].x, points[0].y);
      for (let pointIndex = 1; pointIndex < points.length; pointIndex += 1) {
        commands.push('C',
        points[(pointIndex + 0) % points.length].cNext.x,
        points[(pointIndex + 0) % points.length].cNext.y,
        points[(pointIndex + 1) % points.length].cPrev.x,
        points[(pointIndex + 1) % points.length].cPrev.y,
        points[(pointIndex + 1) % points.length].x,
        points[(pointIndex + 1) % points.length].y);

      }
      commands.push('Z');
      layer.path.setAttribute('d', commands.join(' '));
    }
    this.svgText.textContent = this.text;
    this.svgText.style.fill = this.textColor;
  }

  createPoint(x, y) {
    return {
      x: x,
      y: y,
      ox: x,
      oy: y,
      vx: 0,
      vy: 0 };

  }

  initOrigins() {
    this.svg.setAttribute('width', this.svgWidth);
    this.svg.setAttribute('height', this.svgHeight);
    for (let layerIndex = 0; layerIndex < this.layers.length; layerIndex++) {
      const layer = this.layers[layerIndex];
      const points = [];
      for (let x = ~~(this.height / 2); x < this.width - ~~(this.height / 2); x += this.gap) {
        points.push(this.createPoint(
        x + this.margin,
        this.margin));

      }
      for (let alpha = ~~(this.height * 1.25); alpha >= 0; alpha -= this.gap) {
        const angle = Math.PI / ~~(this.height * 1.25) * alpha;
        points.push(this.createPoint(
        Math.sin(angle) * this.height / 2 + this.margin + this.width - this.height / 2,
        Math.cos(angle) * this.height / 2 + this.margin + this.height / 2));

      }
      for (let x = this.width - ~~(this.height / 2) - 1; x >= ~~(this.height / 2); x -= this.gap) {
        points.push(this.createPoint(
        x + this.margin,
        this.margin + this.height));

      }
      for (let alpha = 0; alpha <= ~~(this.height * 1.25); alpha += this.gap) {
        const angle = Math.PI / ~~(this.height * 1.25) * alpha;
        points.push(this.createPoint(
        this.height - Math.sin(angle) * this.height / 2 + this.margin - this.height / 2,
        Math.cos(angle) * this.height / 2 + this.margin + this.height / 2));

      }
      layer.points = points;
    }
  }};



const redraw = () => {
  button.initOrigins();
};

const buttons = document.getElementsByClassName('liquid-button');
for (let buttonIndex = 0; buttonIndex < buttons.length; buttonIndex++) {
  const button = buttons[buttonIndex];
  button.liquidButton = new LiquidButton(button);
}
    </script>
</body>
</html>

2. By Nikhil Krishnan

Made by Nikhil Krishnan. Button with Particle animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400, 600");
.hero-btn {
  position: relative;
  width: 200px;
  margin: auto;
  height: 66px;
}
.hero-btn .btn {
  background-color: #ff0083;
  border: none;
  outline: none;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  display: inline-block;
  width: 200px;
  height: 66px;
  text-align: center;
  line-height: 66px;
  font-size: 22px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  white-space: nowrap;
  text-overflow: ellipsis;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -moz-appearance: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
  -webkit-box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
  box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
  -moz-transform: perspective(600px) rotateX(0deg) scale(1);
  -ms-transform: perspective(600px) rotateX(0deg) scale(1);
  -webkit-transform: perspective(600px) rotateX(0deg) scale(1);
  transform: perspective(600px) rotateX(0deg) scale(1);
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.hero-btn .btn:hover {
  background-color: #e60076;
  -moz-box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
  -webkit-box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
  box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
}
.hero-btn .btn:active {
  -moz-transform: perspective(600px) rotateX(15deg) scale(0.9);
  -ms-transform: perspective(600px) rotateX(15deg) scale(0.9);
  -webkit-transform: perspective(600px) rotateX(15deg) scale(0.9);
  transform: perspective(600px) rotateX(15deg) scale(0.9);
  font-size: 21px;
  -moz-box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
  -webkit-box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
  box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
}
.active .hero-btn .btn:active {
  -moz-transform: perspective(600px) rotateX(0deg) scale(1);
  -ms-transform: perspective(600px) rotateX(0deg) scale(1);
  -webkit-transform: perspective(600px) rotateX(0deg) scale(1);
  transform: perspective(600px) rotateX(0deg) scale(1);
  font-size: 22px;
  -moz-box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
  -webkit-box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
  box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
}
.hero-btn .particles-circle {
  position: absolute;
  background-color: #ff0083;
  width: 30px;
  height: 30px;
  top: 10px;
  left: 50%;
  margin-left: -15px;
  z-index: -1;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  visibility: hidden;
}
.hero-btn .particles-circle:nth-of-type(odd) {
  border: solid 2px #ff0083;
  background-color: transparent;
}
@keyframes particles-1 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 181px;
    top: -156px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(1) {
  animation: particles-1 1.5s 0.025s;
}
@keyframes particles-2 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 195px;
    top: 136px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(2) {
  animation: particles-2 1.5s 0.05s;
}
@keyframes particles-3 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -234px;
    top: 148px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(3) {
  animation: particles-3 1.5s 0.075s;
}
@keyframes particles-4 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 142px;
    top: -211px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(4) {
  animation: particles-4 1.5s 0.1s;
}
@keyframes particles-5 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 232px;
    top: 229px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(5) {
  animation: particles-5 1.5s 0.125s;
}
@keyframes particles-6 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -42px;
    top: -73px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(6) {
  animation: particles-6 1.5s 0.15s;
}
@keyframes particles-7 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 82px;
    top: 98px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(7) {
  animation: particles-7 1.5s 0.175s;
}
@keyframes particles-8 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 1px;
    top: 67px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(8) {
  animation: particles-8 1.5s 0.2s;
}
@keyframes particles-9 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -191px;
    top: 11px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(9) {
  animation: particles-9 1.5s 0.225s;
}
@keyframes particles-10 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 113px;
    top: -219px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(10) {
  animation: particles-10 1.5s 0.25s;
}
@keyframes particles-11 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 73px;
    top: 186px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(11) {
  animation: particles-11 1.5s 0.275s;
}
@keyframes particles-12 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -205px;
    top: 1px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(12) {
  animation: particles-12 1.5s 0.3s;
}
@keyframes particles-13 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 73px;
    top: -146px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(13) {
  animation: particles-13 1.5s 0.325s;
}
@keyframes particles-14 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -51px;
    top: 52px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(14) {
  animation: particles-14 1.5s 0.35s;
}
@keyframes particles-15 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 112px;
    top: 4px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(15) {
  animation: particles-15 1.5s 0.375s;
}
@keyframes particles-16 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -145px;
    top: 152px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(16) {
  animation: particles-16 1.5s 0.4s;
}
@keyframes particles-17 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 202px;
    top: 107px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(17) {
  animation: particles-17 1.5s 0.425s;
}
@keyframes particles-18 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -231px;
    top: 135px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(18) {
  animation: particles-18 1.5s 0.45s;
}
@keyframes particles-19 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -15px;
    top: -242px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(19) {
  animation: particles-19 1.5s 0.475s;
}
@keyframes particles-20 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -96px;
    top: 98px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(20) {
  animation: particles-20 1.5s 0.5s;
}
@keyframes particles-21 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -204px;
    top: 11px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(21) {
  animation: particles-21 1.5s 0.525s;
}
@keyframes particles-22 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -48px;
    top: -96px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(22) {
  animation: particles-22 1.5s 0.55s;
}
@keyframes particles-23 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 154px;
    top: 159px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(23) {
  animation: particles-23 1.5s 0.575s;
}
@keyframes particles-24 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -228px;
    top: -219px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(24) {
  animation: particles-24 1.5s 0.6s;
}
@keyframes particles-25 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 169px;
    top: -64px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(25) {
  animation: particles-25 1.5s 0.625s;
}
@keyframes particles-26 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -115px;
    top: -98px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(26) {
  animation: particles-26 1.5s 0.65s;
}
@keyframes particles-27 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -53px;
    top: 179px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(27) {
  animation: particles-27 1.5s 0.675s;
}
@keyframes particles-28 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 151px;
    top: -132px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(28) {
  animation: particles-28 1.5s 0.7s;
}
@keyframes particles-29 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 222px;
    top: -30px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(29) {
  animation: particles-29 1.5s 0.725s;
}
@keyframes particles-30 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 129px;
    top: -43px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(30) {
  animation: particles-30 1.5s 0.75s;
}
@keyframes particles-31 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -218px;
    top: -32px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(31) {
  animation: particles-31 1.5s 0.775s;
}
@keyframes particles-32 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -119px;
    top: 185px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(32) {
  animation: particles-32 1.5s 0.8s;
}
@keyframes particles-33 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 110px;
    top: -179px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(33) {
  animation: particles-33 1.5s 0.825s;
}
@keyframes particles-34 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 217px;
    top: -104px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(34) {
  animation: particles-34 1.5s 0.85s;
}
@keyframes particles-35 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 14px;
    top: 181px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(35) {
  animation: particles-35 1.5s 0.875s;
}

.v-align {
  position: absolute;
  text-align: center;
  left: 0;
  width: 100%;
  max-height: 90vh;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.wrap__sparks {
  transform: translateZ(-100px);
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  background: #f8faff;
  height: 100vh;
  position: relative;
}

h1 {
  font-size: 24px;
  display: block;
  text-align: center;
  color: #6a11cb;
  font-weight: 500;
}

.made-with-love {
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 10px;
  text-align: center;
  font-size: 10px;
  z-index: 9999;
  font-family: arial;
  color: #ff0083;
  font-weight: 600;
}
.made-with-love i {
  font-style: normal;
  font-size: 14px;
  position: relative;
  top: 2px;
}
.made-with-love a {
  color: #ff0083;
  text-decoration: none;
}
.made-with-love a:hover {
  text-decoration: underline;
}
.made-with-love .dribble img {
  max-width: 100%;
  width: 26px;
  position: relative;
  top: -2px;
  vertical-align: middle;
}
</style>
</head>
<body>
  <div class='v-align'>
  <div class='hero-btn'>
    <button class='btn'>
      Click
    </button>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
    <span class='particles-circle'></span>
  </div>
</div>
<!-- follow me template -->
<div class='made-with-love'>
  Made With
  <span>โ™ฅ</span>
  by
  <a href='https://codepen.io/nikhil8krishnan' target='_blank'>Nikhil Krishnan</a>
  | Inspired Dribble Shot from
  <a class='dribble' href='https://dribbble.com/shots/3975065-With-a-Click-of-a-Button' target='_blank'>
    Gal Shir
    <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2YWQ3MDE1Zi0yMjAwLTRiMDYtYWExOC1jNTlhOWFhYmI2ZTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTg2MTZEMDA2NjZBMTFFM0IzQ0VENjdGQ0VEQ0YzREIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUM1QzJFRUE2NjY5MTFFM0IzQ0VENjdGQ0VEQ0YzREIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTM3NTA4NzQtNDBhNy00NGNjLWEwMWUtZjc2YzdiYTNlOWEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjZhZDcwMTVmLTIyMDAtNGIwNi1hYTE4LWM1OWE5YWFiYjZlMiIvPiA8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'>
  </a>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$('.hero-btn').click(function () {
  if (!$('.hero-btn').parent().hasClass('active')) {
    $(this).parent().stop().addClass('active');
    setTimeout(function () {
      $('.hero-btn').parent().removeClass('active');
    }, 2000);
  }
});
    </script>
</body>
</html>

3. By Cosimo Scarpa

Made by Cosimo Scarpa. JavaScript button with sliding effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>

<style>
@import url("https://fonts.googleapis.com/css?family=Muli:300,400,700,900");
.btn-wrap {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f3f9;
  height: 100vh;
  font-family: "Muli", Arial, sans-serif;
}

#dribbble {
  position: fixed;
  display: block;
  right: 70px;
  bottom: 16px;
}
#dribbble svg {
  display: block;
  width: 76px;
  height: 24px;
  fill: rgba(146, 156, 208, 0.8);
}

#twitter {
  position: fixed;
  display: block;
  right: 25px;
  bottom: 11px;
}
#twitter svg {
  width: 24px;
  height: 24px;
  fill: rgba(146, 156, 208, 0.8);
}

#hicon {
  position: fixed;
  display: block;
  left: 25px;
  bottom: -42px;
}
#hicon svg {
  width: 78px;
  height: 78px;
  fill: rgba(146, 156, 208, 0.8);
}

.cnt, .btn-cnt {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lock-on, .cnt, .btn-wrap, .concept-wrap {
  width: 200px;
  height: 70px;
}

.concept-wrap {
  position: relative;
  cursor: pointer;
}

.btn-wrap {
  cursor: pointer;
  position: absolute;
  background: #1462ff;
  border-radius: 12px;
  box-shadow: 0 6px 30px -10px #4a74c9;
  overflow: hidden;
  transform: translateX(0);
}

.btn-cnt {
  position: absolute;
  top: 0;
  right: 0;
  flex-direction: row;
  height: 70px;
  width: 800px;
  z-index: 9;
}

.cnt {
  justify-content: space-around;
  box-sizing: border-box;
  padding: 0 25px;
}
.cnt .text {
  text-align: left;
  font-size: 1.4em;
  margin-right: auto;
  color: #fff;
}
.cnt .icon {
  margin-top: 3px;
  color: #fff;
}

.tap {
  width: 140px;
  height: 140px;
  position: absolute;
  background: transparent;
  opacity: 0.4;
  top: calc(50% - 69px);
  right: -32px;
  border-radius: 50%;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

.wave {
  width: 30px;
  height: 30px;
  background: #4784ff;
  border-radius: 50%;
  opacity: 0;
}

.wave-act {
  animation: t-wave 599ms cubic-bezier(0.77, 0.06, 0, 0.99) forwards;
}

@keyframes t-wave {
  0% {
    width: 50px;
    height: 50px;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  20% {
    width: 40px;
    height: 40px;
  }
  50% {
    opacity: 0.9;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    width: 140px;
    height: 140px;
  }
}
.lock-on {
  background: transparent;
  position: absolute;
  z-index: 11;
  cursor: pointer;
}
</style>
</head>
<body>
  <div class='lock'></div>
<div class='concept-wrap' id='mainWrap'>
  <div class='tap'>
    <div class='wave'></div>
  </div>
  <div class='btn-wrap' id='btn'>
    <div class='btn-cnt' id='content'>
      <div class='cnt cnt-1'><p class='text'>Expert</p>
        <i class='icon' data-feather="chevron-right"></i>
      </div>
      <div class='cnt cnt-2'><p class='text'>Hard</p>
        <i class='icon' data-feather="chevron-right"></i>
      </div>
      <div class='cnt cnt-3'><p class='text'>Normal</p>
        <i class='icon' data-feather="chevron-right"></i>
      </div>
      <div class='cnt cnt-4'><p class='text'>Easy</p>
        <i class='icon' data-feather="chevron-right"></i>
      </div>
    </div>
  </div>
</div>

<!-- References Dribbble / Twitter / Hicon Pack -->
<div class='cs-ref'>
  <a class='cs-dribbble' href="https://dribbble.com/shots/14106091-UI-Custom-Select-Tag" target='_blank'>
    <div id='svgDribbble'></div>
  </a>
  <a class='cs-twitter' target='_blank' href="https://twitter.com/CosWiSe">
    <div id='svgTwitter'></div>
  </a>
    <a class="cs-hicon" target="_new" href="https://hicon.cosm.ws">
    <div id='svgHicon'></div>
  </a>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.min.js'></script>
<script src='https://raw.githubusercontent.com/rdallasgray/bez/master/src/jquery.bez.js'></script>
      <script>
// ICONS CALLBACK
feather.replace();

// SVGs
$('#svgDribbble').load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/373860/references.html #dribbble');
$('#svgTwitter').load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/373860/references.html #twitter');
$('#svgHicon').load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/373860/references.html #hicon');

// NEW CODE HERE

// Variables
var btnSz = 200;
var c = 0;
var bezierEasing = 'cubic-bezier(.69,-0.49,0,1)';
var t1 = 299;
var t2 = 1198;

var bZ2 = 'cubic-bezier(.46,.56,0,.88)';

$('#mainWrap').on('click', function () {
  c++;
  console.log(c);

  // Lock
  $('.lock').addClass('lock-on');
  setTimeout(function () {
    $('.lock').removeClass('lock-on');
  }, 1200);

  // Wave
  $('.wave').addClass('wave-act');
  setTimeout(function () {
    $('.wave').removeClass('wave-act');
  }, 1000);

  // Move Button
  setTimeout(function () {
    $('#btn').transition({
      x: '+=10px' },
    289, bZ2, function () {
      $('#btn').transition({
        x: '0px' },
      289, bZ2);
    });
  }, 399);


  // Move Content
  setTimeout(function () {
    if (c <= 2) {
      $('#content').transition({
        x: '+=220px' },
      t1, bezierEasing, function () {
        $('#content').transition({
          x: '-=20' },
        699, 'cubic-bezier(.25,.49,.2,1)');
      });

    } else if (c == 3) {
      $('#content').transition({
        x: '+=220px' },
      t1, bezierEasing, function () {
        $('#content').transition({
          x: '-=20' },
        699, 'cubic-bezier(.25,.49,.2,1)');
      });
      setTimeout(function () {
        $('.cnt-1').css('order', '4');
        $('#content').transition({
          x: '0' },
        0);
      }, t2);
    } else if (c == 4) {
      $('#content').transition({
        x: '+=220px' },
      t1, bezierEasing, function () {
        $('#content').transition({
          x: '-=20' },
        699, 'cubic-bezier(.25,.49,.2,1)');
      });
      setTimeout(function () {
        $('#content').transition({
          x: '0' },
        0);
        $('.cnt-1').css('order', '0');
      }, t2);
      c = 0;
    }
  }, 399);


});
    </script>
</body>
</html>

4. By Aaron Iker

Made by Aaron Iker. Download button with animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap'>
  
<style>
.button.dark-single {
  --background: none;
  --rectangle: #242836;
  --success: #4BC793;
}
.button.white-single {
  --background: none;
  --rectangle: #F5F9FF;
  --arrow: #275efe;
  --success: #275efe;
  --shadow: rgba(10, 22, 50, .1);
}
.button.dark {
  --background: #242836;
  --rectangle: #1C212E;
  --arrow: #F5F9FF;
  --text: #F5F9FF;
  --success: #2F3545;
}

.button {
  --background: #275efe;
  --rectangle: #184fee;
  --success: #4672f1;
  --text: #fff;
  --arrow: #fff;
  --checkmark: #fff;
  --shadow: rgba(10, 22, 50, .24);
  display: flex;
  overflow: hidden;
  text-decoration: none;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  background: var(--background);
  border-radius: 8px;
  box-shadow: 0 2px 8px -1px var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.button:active {
  transform: scale(0.95);
  box-shadow: 0 1px 4px -1px var(--shadow);
}
.button ul {
  margin: 0;
  padding: 16px 40px;
  list-style: none;
  text-align: center;
  position: relative;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  color: var(--text);
}
.button ul li:not(:first-child) {
  top: 16px;
  left: 0;
  right: 0;
  position: absolute;
}
.button ul li:nth-child(2) {
  top: 76px;
}
.button ul li:nth-child(3) {
  top: 136px;
}
.button > div {
  position: relative;
  width: 60px;
  height: 60px;
  background: var(--rectangle);
}
.button > div:before, .button > div:after {
  content: "";
  display: block;
  position: absolute;
}
.button > div:before {
  border-radius: 1px;
  width: 2px;
  top: 50%;
  left: 50%;
  height: 17px;
  margin: -9px 0 0 -1px;
  background: var(--arrow);
}
.button > div:after {
  width: 60px;
  height: 60px;
  transform-origin: 50% 0;
  border-radius: 0 0 80% 80%;
  background: var(--success);
  top: 0;
  left: 0;
  transform: scaleY(0);
}
.button > div svg {
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: 50%;
  top: 50%;
  margin: -9px 0 0 -10px;
  fill: none;
  z-index: 1;
  stroke-width: 2px;
  stroke: var(--arrow);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.button.loading ul {
  -webkit-animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
          animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
.button.loading > div:before {
  -webkit-animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
          animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
.button.loading > div:after {
  -webkit-animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
          animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
.button.loading > div svg {
  -webkit-animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
          animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}

@-webkit-keyframes text {
  10%, 85% {
    transform: translateY(-100%);
  }
  95%, 100% {
    transform: translateY(-200%);
  }
}

@keyframes text {
  10%, 85% {
    transform: translateY(-100%);
  }
  95%, 100% {
    transform: translateY(-200%);
  }
}
@-webkit-keyframes line {
  5%, 10% {
    transform: translateY(-30px);
  }
  40% {
    transform: translateY(-20px);
  }
  65% {
    transform: translateY(0);
  }
  75%, 100% {
    transform: translateY(30px);
  }
}
@keyframes line {
  5%, 10% {
    transform: translateY(-30px);
  }
  40% {
    transform: translateY(-20px);
  }
  65% {
    transform: translateY(0);
  }
  75%, 100% {
    transform: translateY(30px);
  }
}
@-webkit-keyframes svg {
  0%, 20% {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
  }
  21%, 89% {
    stroke-dasharray: 26px;
    stroke-dashoffset: 26px;
    stroke-width: 3px;
    margin: -10px 0 0 -10px;
    stroke: var(--checkmark);
  }
  100% {
    stroke-dasharray: 26px;
    stroke-dashoffset: 0;
    margin: -10px 0 0 -10px;
    stroke: var(--checkmark);
  }
  12% {
    opacity: 1;
  }
  20%, 89% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}
@keyframes svg {
  0%, 20% {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
  }
  21%, 89% {
    stroke-dasharray: 26px;
    stroke-dashoffset: 26px;
    stroke-width: 3px;
    margin: -10px 0 0 -10px;
    stroke: var(--checkmark);
  }
  100% {
    stroke-dasharray: 26px;
    stroke-dashoffset: 0;
    margin: -10px 0 0 -10px;
    stroke: var(--checkmark);
  }
  12% {
    opacity: 1;
  }
  20%, 89% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes background {
  10% {
    transform: scaleY(0);
  }
  40% {
    transform: scaleY(0.15);
  }
  65% {
    transform: scaleY(0.5);
    border-radius: 0 0 50% 50%;
  }
  75% {
    border-radius: 0 0 50% 50%;
  }
  90%, 100% {
    border-radius: 0;
  }
  75%, 100% {
    transform: scaleY(1);
  }
}
@keyframes background {
  10% {
    transform: scaleY(0);
  }
  40% {
    transform: scaleY(0.15);
  }
  65% {
    transform: scaleY(0.5);
    border-radius: 0 0 50% 50%;
  }
  75% {
    border-radius: 0 0 50% 50%;
  }
  90%, 100% {
    border-radius: 0;
  }
  75%, 100% {
    transform: scaleY(1);
  }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
  font-family: "Roboto", Arial;
  justify-content: center;
  align-items: center;
  background: #E4ECFA;
}
body .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
body .container > div {
  flex-basis: 100%;
  width: 0;
}
body .container .button {
  margin: 16px;
}
@media (max-width: 400px) {
  body .container .button {
    margin: 12px;
  }
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  height: 28px;
}
</style>
</head>
<body>
  <div class="container">

    <a href="" class="button">
        <ul>
            <li>&#68;ownload</li>
            <li>&#68;ownloading</li>
            <li>Open File</li>
        </ul>
        <div>
            <svg viewBox="0 0 24 24"></svg>
        </div>
    </a>

    <a href="" class="button dark-single">
        <div>
            <svg viewBox="0 0 24 24"></svg>
        </div>
    </a>

    <div></div>

    <a href="" class="button white-single">
        <div>
            <svg viewBox="0 0 24 24"></svg>
        </div>
    </a>

    <a href="" class="button dark">
        <ul>
            <li>&#68;ownload</li>
            <li>&#68;ownloading</li>
            <li>Open File</li>
        </ul>
        <div>
            <svg viewBox="0 0 24 24"></svg>
        </div>
    </a>

</div>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/7299868-Download-Buttons" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js'></script>
      <script>
document.querySelectorAll('.button').forEach(button => {

  let duration = 3000,
  svg = button.querySelector('svg'),
  svgPath = new Proxy({
    y: null,
    smoothing: null },
  {
    set(target, key, value) {
      target[key] = value;
      if (target.y !== null && target.smoothing !== null) {
        svg.innerHTML = getPath(target.y, target.smoothing, null);
      }
      return true;
    },
    get(target, key) {
      return target[key];
    } });


  button.style.setProperty('--duration', duration);

  svgPath.y = 20;
  svgPath.smoothing = 0;

  button.addEventListener('click', e => {

    e.preventDefault();

    if (!button.classList.contains('loading')) {

      button.classList.add('loading');

      gsap.to(svgPath, {
        smoothing: .3,
        duration: duration * .065 / 1000 });


      gsap.to(svgPath, {
        y: 12,
        duration: duration * .265 / 1000,
        delay: duration * .065 / 1000,
        ease: Elastic.easeOut.config(1.12, .4) });


      setTimeout(() => {
        svg.innerHTML = getPath(0, 0, [
        [3, 14],
        [8, 19],
        [21, 6]]);

      }, duration / 2);

    }

  });

});

function getPoint(point, i, a, smoothing) {
  let cp = (current, previous, next, reverse) => {
    let p = previous || current,
    n = next || current,
    o = {
      length: Math.sqrt(Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)),
      angle: Math.atan2(n[1] - p[1], n[0] - p[0]) },

    angle = o.angle + (reverse ? Math.PI : 0),
    length = o.length * smoothing;
    return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length];
  },
  cps = cp(a[i - 1], a[i - 2], point, false),
  cpe = cp(point, a[i - 1], a[i + 1], true);
  return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
}

function getPath(update, smoothing, pointsNew) {
  let points = pointsNew ? pointsNew : [
  [4, 12],
  [12, update],
  [20, 12]],

  d = points.reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, '');
  return `<path d="${d}" />`;
}
    </script>
</body>
</html>

5. By Simon Busborg

Made by Simon Busborg. Simple Buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
:root {
  --color-dark: #161616;
  --color-ocean: #416dea;
  --color-grass: #3dd28d;
  --color-snow: #FFFFFF;
  --color-salmon: #F32C52;
  --color-sun: #feee7d;
  --color-alge: #7999a9;
  --color-flower: #353866;
  --color-smoke: #e4e4e4;
  --borderRadius: 36px;
  --font-face: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  display: flex;
  box-sizing: border-box;
  min-height: 100vh;
  background: whitesmoke;
  font-family: var(--font-face);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  justify-content: center;
  align-items: center;
}
@media (min-width: 992px) {
  body {
    border-width: 30px;
  }
}

body.linked .button, body.linked h1 {
  opacity: 0.3;
  transition: opacity 300ms linear;
}
body.linked p {
  color: var(--color-smoke);
  transition: color 300ms linear;
}

h1 {
  text-align: center;
  transition: opacity 300ms linear;
  color: var(--color-dark);
  font-family: var(--font-face);
  font-size: 32px;
  font-weight: 700;
}
h1 span {
  font-weight: 400;
}

p {
  max-width: 460px;
  margin: 0 auto;
  transition: color 300ms linear;
  text-align: center;
  color: var(--color-dark);
  font-weight: 400;
  line-height: 1.5;
}

a, a:visited {
  text-decoration: none;
  color: var(--color-ocean);
  font-weight: 500;
}
a:hover, a:visited:hover {
  text-decoration: underline;
  color: var(--color-ocean);
}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
}

.button-container {
  display: flex;
  margin: 60px auto;
  flex-wrap: wrap;
  justify-content: center;
}

.button {
  display: flex;
  overflow: hidden;
  margin: 10px;
  padding: 12px 12px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: all 150ms linear;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  text-transform: none;
  text-transform: capitalize;
  color: #fff;
  border: 0 none;
  border-radius: var(--borderRadius);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  justify-content: center;
  align-items: center;
  flex: 0 0 160px;
  box-shadow: 2px 5px 10px var(--color-smoke);
}
.button:hover {
  transition: all 150ms linear;
  opacity: 0.85;
}
.button:active {
  transition: all 150ms linear;
  opacity: 0.75;
}
.button:focus {
  outline: 1px dotted #959595;
  outline-offset: -4px;
}

.button.-regular {
  color: #202129;
  background-color: #f2f2f2;
}
.button.-regular:hover {
  color: #202129;
  background-color: #e1e2e2;
  opacity: 1;
}
.button.-regular:active {
  background-color: #d5d6d6;
  opacity: 1;
}

.button.-dark {
  color: var(--color-snow);
  background: var(--color-dark);
}
.button.-dark:focus {
  outline: 1px dotted white;
  outline-offset: -4px;
}

.button.-green {
  color: var(--color-snow);
  background: var(--color-grass);
}

.button.-blue {
  color: var(--color-snow);
  background: var(--color-ocean);
}

.button.-salmon {
  color: var(--color-snow);
  background: var(--color-salmon);
}

.button.-sun {
  color: #f15c5c;
  background: var(--color-sun);
}

.button.-alge {
  color: #e7ff20;
  background: var(--color-alge);
}

.button.-flower {
  color: #FE8CDF;
  background: var(--color-flower);
}
</style>
</head>
<body>
  <div class='container'>
  <h1>
    Buttons
  </h1>
  <p>
    Random selection of button styles. May change over time as I get alot of stupid ideas. Feel free to follow me on  <a href="https://twitter.com/simonbusborg" target="_blank" class="twitter">twitter</a>
  </p>
  <div class="button-container">
    <div class='button -regular center'>Let's start</div>
    
    <div class='button -dark center'>Touch me</div>
    
    <div class='button -green center'>Just like that</div>
    
    <div class='button -blue center'>And that, oh, yeah</div>
        
    <div class='button -salmon center'>Now that I like</div>
    
    <div class='button -sun center'>God, that's so nice</div>
    
    <div class='button -alge center'>Now lower down</div>
    
    <div class='button -flower center'>Where the figs lie</div>
    
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
const body = document.querySelector('body');
const twitter = document.querySelector('.twitter');

twitter.addEventListener("mouseover", function () {
  body.classList.add('linked');
}, false);

twitter.addEventListener("mouseout", function () {
  body.classList.remove('linked');
}, false);
    </script>
</body>
</html>

6. By Andrew Millen

Made by Andrew Millen. JavaScript submit button with loading and success animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
body {
  background: #1D1F20;
}

main {
  height: 100vh;
  width: 100vw;
}

.button {
  background: #2B2D2F;
  height: 80px;
  width: 200px;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  cursor: pointer;
  border-radius: 4px;
}

.text {
  font: bold 1.25rem/1 poppins;
  color: #71DFBE;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
}

.progress-bar {
  position: absolute;
  height: 10px;
  width: 0;
  right: 0;
  top: 50%;
  left: 50%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: #505357;
}

svg {
  width: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
  right: 0;
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
</style>
</head>
<body>
  <link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
<main>
  <div class="button">
    <div class="text">Submit</div>
  </div>
  <div class="progress-bar"></div>
  <svg x="0px" y="0px"
	 viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
    <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2"/>
  </svg>
</main>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js'></script>
      <script>
var basicTimeline = anime.timeline({
  autoplay: false });


var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}window.CP.exitedLoop(0);

basicTimeline.
add({
  targets: ".text",
  duration: 1,
  opacity: "0" }).

add({
  targets: ".button",
  duration: 1300,
  height: 10,
  width: 300,
  backgroundColor: "#2B2D2F",
  border: "0",
  borderRadius: 100 }).

add({
  targets: ".progress-bar",
  duration: 2000,
  width: 300,
  easing: "linear" }).

add({
  targets: ".button",
  width: 0,
  duration: 1 }).

add({
  targets: ".progress-bar",
  width: 80,
  height: 80,
  delay: 500,
  duration: 750,
  borderRadius: 80,
  backgroundColor: "#71DFBE" }).

add({
  targets: pathEl,
  strokeDashoffset: [offset, 0],
  duration: 200,
  easing: "easeInOutSine" });


$(".button").click(function () {
  basicTimeline.play();
});

$(".text").click(function () {
  basicTimeline.play();
});
    </script>
</body>
</html>

7. By Cooper Goeke

Made by Cooper Goeke. Button with loading and confetti animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 
<style>
@keyframes loading {
  0% {
    cy: 10;
  }
  25% {
    cy: 3;
  }
  50% {
    cy: 10;
  }
}
body {
  -webkit-font-smoothing: antialiased;
  background-color: #f4f7ff;
}

canvas {
  height: 100vh;
  pointer-events: none;
  position: fixed;
  width: 100%;
  z-index: 2;
}

button {
  background: none;
  border: none;
  color: #f4f7ff;
  cursor: pointer;
  font-family: "Quicksand", sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  left: 50%;
  outline: none;
  overflow: hidden;
  padding: 0 10px;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 190px;
  -webkit-tap-highlight-color: transparent;
  z-index: 1;
}
button::before {
  background: #1f2335;
  border-radius: 50px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) inset;
  content: "";
  display: block;
  height: 100%;
  margin: 0 auto;
  position: relative;
  transition: width 0.2s cubic-bezier(0.39, 1.86, 0.64, 1) 0.3s;
  width: 100%;
}

button.ready .submitMessage svg {
  opacity: 1;
  top: 1px;
  transition: top 0.4s ease 600ms, opacity 0.3s linear 600ms;
}
button.ready .submitMessage .button-text span {
  top: 0;
  opacity: 1;
  transition: all 0.2s ease calc(var(--dr) + 600ms);
}

button.loading::before {
  transition: width 0.3s ease;
  width: 80%;
}
button.loading .loadingMessage {
  opacity: 1;
}
button.loading .loadingCircle {
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: loading;
  cy: 10;
}

button.complete .submitMessage svg {
  top: -30px;
  transition: none;
}
button.complete .submitMessage .button-text span {
  top: -8px;
  transition: none;
}
button.complete .loadingMessage {
  top: 80px;
}
button.complete .successMessage .button-text span {
  left: 0;
  opacity: 1;
  transition: all 0.2s ease calc(var(--d) + 1000ms);
}
button.complete .successMessage svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease-in-out 1.4s;
}

.button-text span {
  opacity: 0;
  position: relative;
}

.message {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.message svg {
  display: inline-block;
  fill: none;
  margin-right: 5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.submitMessage .button-text span {
  top: 8px;
  transition: all 0.2s ease var(--d);
}
.submitMessage svg {
  color: #5c86ff;
  margin-left: -1px;
  opacity: 0;
  position: relative;
  top: 30px;
  transition: top 0.4s ease, opacity 0.3s linear;
  width: 14px;
}

.loadingMessage {
  opacity: 0;
  transition: opacity 0.3s linear 0.3s, top 0.4s cubic-bezier(0.22, 0, 0.41, -0.57);
}
.loadingMessage svg {
  fill: #5c86ff;
  margin: 0;
  width: 22px;
}

.successMessage .button-text span {
  left: 5px;
  transition: all 0.2s ease var(--dr);
}
.successMessage svg {
  color: #5cffa1;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.3s ease-in-out;
  width: 14px;
}

.loadingCircle:nth-child(2) {
  animation-delay: 0.1s;
}

.loadingCircle:nth-child(3) {
  animation-delay: 0.2s;
}

/* Website Link */
.website-link {
  background: #f8faff;
  border-radius: 50px 0 0 50px;
  bottom: 30px;
  color: #324b77;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  height: 34px;
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.1));
  padding: 0 20px 0 40px;
  position: fixed;
  right: 0;
  text-align: left;
  text-decoration: none;
}
.website-link__icon {
  left: -10px;
  position: absolute;
  top: -12px;
  width: 44px;
}
.website-link__name {
  display: block;
  font-size: 14px;
  line-height: 14px;
  margin: 5px 0 3px;
}
.website-link__last-name {
  color: #55bada;
}
.website-link__message {
  color: #8aa8c5;
  display: block;
  font-size: 7px;
  line-height: 7px;
}
</style>
</head>
<body>
  <button id="button" class="ready" onclick="clickButton();">
  
  <div class="message submitMessage">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 12.2">
      <polyline stroke="currentColor" points="2,7.1 6.5,11.1 11,7.1 "/>
      <line stroke="currentColor" x1="6.5" y1="1.2" x2="6.5" y2="10.3"/>
    </svg> <span class="button-text">Submit</span>
  </div>
  
  <div class="message loadingMessage">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 17">
      <circle class="loadingCircle" cx="2.2" cy="10" r="1.6"/>
      <circle class="loadingCircle" cx="9.5" cy="10" r="1.6"/>
      <circle class="loadingCircle" cx="16.8" cy="10" r="1.6"/>
    </svg>
  </div>
  
  <div class="message successMessage">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 11">
      <polyline stroke="currentColor" points="1.4,5.8 5.1,9.5 11.6,2.1 "/>
    </svg> <span class="button-text">Success</span>
  </div>
</button>

<canvas id="canvas"></canvas>

<!-- Website Corner Link -->
<a class="website-link" href="https://codepen.io/coopergoeke" target="_blank" rel="noopener noreferrer">
  <svg class="website-link__icon" viewBox="0 0 936.86 1054.94">
    <circle cx="468.43" cy="607.07" r="395.02" fill="#fff" stroke="#8aa8c5" stroke-width="55" stroke-miterlimit="10"/>
    <path d="M235.76 936.24l9.7-135.08c3.7-53.1 43.2-96.01 96.01-93.96h250.85c52.81-2.05 92.33 41.65 96.01 93.96l10.73 135.81s-98.94 65.12-231.06 65.12-232.24-65.85-232.24-65.85z" fill="#293b67"/>
    <circle cx="468.43" cy="607.07" r="395.02" fill="none" stroke="#8aa8c5" stroke-width="55" stroke-miterlimit="10"/>
    <path d="M532.23 716.09c0 23.61-35.44 30-64.23 30s-64.23-8.39-64.23-30V607.76h128.46v108.33z" fill="#e2cfbb"/>
    <path d="M532.23 678.63s-35.44 8.46-64.23 8.46-64.23-7.83-64.23-7.83v-130.5h128.46v129.87z" fill="#d3c2b2"/>
    <path d="M722.57 326.26c0 193.67-79.11 350.67-255.53 350.67s-253.25-157-253.25-350.67 156.76-210.31 253.25-210.31c126.23 0 255.53 16.64 255.53 210.31z" fill="#ffe8cc"/>
    <path d="M604.47 634.6c-11.18 8.23-23.2 15.37-36.06 21.33-29.33 13.58-63.06 20.99-101.38 20.99-31.91 0-60.57-5.14-86.1-14.7-50.16-18.78-88.26-54.66-115.33-102.22-35.3-62.04-51.82-143.95-51.82-233.74 0-83.76 29.32-134.41 70.41-164.91-90.46 362.86 101.1 570.06 320.28 473.25z" fill="#f3ddc3"/>
    <path d="M701.59 182.44c-6.72-15.99-8.89-39.53-18.6-51.9-1.69-2.16-6.62-3.91-12.43-5.52-15.99-16.61-43.59-39.48-65.94-49.1-7.45-3.21-49.94-38.95-58.11-41.45-6.06-1.85-3.35 25.38-19.3 18.59-31.38-13.36-71.2-32.91-85.46-34.43-17.17-1.84 6.77 41.39-12.69 41.39-36.11 0-65.27-23.14-82.97-25.55-1.48 22.91-9.35 37.78-24.01 44.8-12.97 6.21-42.51.74-53.19 9.43 8.93 20.86-.31 22.93-1.87 37.18-7.32 3.08-17.47 5.36-17.47 5.36-11.17 13.67-10.86 35.77-18.24 54.03-7.44 18.42-12.96 39.27-16.63 62.75-3.65 23.39-3.52 72.17-3.52 101 0 96.83 56.25-132.84 91.88-160.87 35.63-28.02 164-32.7 164-32.7S620 163.71 648.95 193.9c28.95 30.18 75.9 249.36 75.9 160.96 0-59.25-7.63-135.22-23.26-172.42z" fill="#f2cf6f"/>
    <path d="M441.75 18.63c-15.02-1.61 1.38 31.23-7.26 39.53 15.28-3.58 10.26-39.58 7.26-39.53z" fill="#d8b45c"/>
    <path d="M346.09 34.47c-1.48 22.91-12.06 43.85-33.99 47.54 12.81-1.1 21.29 3.03 34.75-2.18 17.45-6.76 16.94-42.95-.76-45.36z" fill="#d8b45c"/>
    <path d="M268.89 88.7c8.93 20.86-.31 22.93-1.87 37.18-7.32 3.08-17.47 5.36-17.47 5.36-11.17 13.67-10.86 35.77-18.24 54.03-7.44 18.42-12.96 39.27-16.63 62.75-3.65 23.39 15.73-33.35 48.77-64.39 32.36-30.39 16.12-103.62 5.44-94.93z" fill="#d8b45c"/>
    <path d="M505.31 460.4c0-10.8-16.63-19.55-37.14-19.55s-37.14 8.75-37.14 19.55 74.28 10.79 74.28 0z" fill="#d3bfae"/>
    <path d="M330.65 366.32c28.67-30.62 53.86-31.06 82.1 0" fill="none" stroke="#000" stroke-width="14" stroke-linecap="round" stroke-miterlimit="10"/>
    <path d="M521.65 366.32c28.67-30.62 53.86-31.06 82.1 0" fill="none" stroke="#000" stroke-width="14" stroke-linecap="round" stroke-miterlimit="10"/>
    <path d="M468.01 617.93c-35.42 0-71.93-28.05-71.93-55.82 0-12.56 10.52-18.84 23.38-18.84h97.43c12.86 0 23.38 6.31 23.38 18.84 0 30.2-36.84 55.82-72.26 55.82z" fill="#824446"/>
    <defs>
      <path id="a" d="M468.01 617.93c-35.42 0-71.93-28.05-71.93-55.82 0-12.56 10.52-18.84 23.38-18.84h97.43c12.86 0 23.38 6.31 23.38 18.84 0 30.2-36.84 55.82-72.26 55.82z"/>
    </defs>
    <clipPath id="b">
      <use xlink:href="#a" overflow="visible"/>
    </clipPath>
    <circle cx="468.17" cy="614.05" r="30" clip-path="url(#b)" fill="#f37879"/>
  </svg>
  <span class="website-link__name">Cooper <span class="website-link__last-name">Goeke</span></span>
  <span class="website-link__message">Check out more of my work</span>
</a>
      <script>
// ammount to add on each button press
const confettiCount = 20;
const sequinCount = 10;

// "physics" variables
const gravityConfetti = 0.3;
const gravitySequins = 0.55;
const dragConfetti = 0.075;
const dragSequins = 0.02;
const terminalVelocity = 3;

// init other global elements
const button = document.getElementById('button');
var disabled = false;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let cx = ctx.canvas.width / 2;
let cy = ctx.canvas.height / 2;

// add Confetto/Sequin objects to arrays to draw them
let confetti = [];
let sequins = [];

// colors, back side is darker for confetti flipping
const colors = [
{ front: '#7b5cff', back: '#6245e0' }, // Purple
{ front: '#b3c7ff', back: '#8fa5e5' }, // Light Blue
{ front: '#5c86ff', back: '#345dd1' } // Darker Blue
];

// helper function to pick a random number within a range
randomRange = (min, max) => Math.random() * (max - min) + min;

// helper function to get initial velocities for confetti
// this weighted spread helps the confetti look more realistic
initConfettoVelocity = (xRange, yRange) => {
  const x = randomRange(xRange[0], xRange[1]);
  const range = yRange[1] - yRange[0] + 1;
  let y = yRange[1] - Math.abs(randomRange(0, range) + randomRange(0, range) - range);
  if (y >= yRange[1] - 1) {
    // Occasional confetto goes higher than the max
    y += Math.random() < .25 ? randomRange(1, 3) : 0;
  }
  return { x: x, y: -y };
};

// Confetto Class
function Confetto() {
  this.randomModifier = randomRange(0, 99);
  this.color = colors[Math.floor(randomRange(0, colors.length))];
  this.dimensions = {
    x: randomRange(5, 9),
    y: randomRange(8, 15) };

  this.position = {
    x: randomRange(canvas.width / 2 - button.offsetWidth / 4, canvas.width / 2 + button.offsetWidth / 4),
    y: randomRange(canvas.height / 2 + button.offsetHeight / 2 + 8, canvas.height / 2 + 1.5 * button.offsetHeight - 8) };

  this.rotation = randomRange(0, 2 * Math.PI);
  this.scale = {
    x: 1,
    y: 1 };

  this.velocity = initConfettoVelocity([-9, 9], [6, 11]);
}
Confetto.prototype.update = function () {
  // apply forces to velocity
  this.velocity.x -= this.velocity.x * dragConfetti;
  this.velocity.y = Math.min(this.velocity.y + gravityConfetti, terminalVelocity);
  this.velocity.x += Math.random() > 0.5 ? Math.random() : -Math.random();

  // set position
  this.position.x += this.velocity.x;
  this.position.y += this.velocity.y;

  // spin confetto by scaling y and set the color, .09 just slows cosine frequency
  this.scale.y = Math.cos((this.position.y + this.randomModifier) * 0.09);
};

// Sequin Class
function Sequin() {
  this.color = colors[Math.floor(randomRange(0, colors.length))].back,
  this.radius = randomRange(1, 2),
  this.position = {
    x: randomRange(canvas.width / 2 - button.offsetWidth / 3, canvas.width / 2 + button.offsetWidth / 3),
    y: randomRange(canvas.height / 2 + button.offsetHeight / 2 + 8, canvas.height / 2 + 1.5 * button.offsetHeight - 8) },

  this.velocity = {
    x: randomRange(-6, 6),
    y: randomRange(-8, -12) };

}
Sequin.prototype.update = function () {
  // apply forces to velocity
  this.velocity.x -= this.velocity.x * dragSequins;
  this.velocity.y = this.velocity.y + gravitySequins;

  // set position
  this.position.x += this.velocity.x;
  this.position.y += this.velocity.y;
};

// add elements to arrays to be drawn
initBurst = () => {
  for (let i = 0; i < confettiCount; i++) {
    confetti.push(new Confetto());
  }
  for (let i = 0; i < sequinCount; i++) {
    sequins.push(new Sequin());
  }
};

// draws the elements on the canvas
render = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  confetti.forEach((confetto, index) => {
    let width = confetto.dimensions.x * confetto.scale.x;
    let height = confetto.dimensions.y * confetto.scale.y;

    // move canvas to position and rotate
    ctx.translate(confetto.position.x, confetto.position.y);
    ctx.rotate(confetto.rotation);

    // update confetto "physics" values
    confetto.update();

    // get front or back fill color
    ctx.fillStyle = confetto.scale.y > 0 ? confetto.color.front : confetto.color.back;

    // draw confetto
    ctx.fillRect(-width / 2, -height / 2, width, height);

    // reset transform matrix
    ctx.setTransform(1, 0, 0, 1, 0, 0);

    // clear rectangle where button cuts off
    if (confetto.velocity.y < 0) {
      ctx.clearRect(canvas.width / 2 - button.offsetWidth / 2, canvas.height / 2 + button.offsetHeight / 2, button.offsetWidth, button.offsetHeight);
    }
  });

  sequins.forEach((sequin, index) => {
    // move canvas to position
    ctx.translate(sequin.position.x, sequin.position.y);

    // update sequin "physics" values
    sequin.update();

    // set the color
    ctx.fillStyle = sequin.color;

    // draw sequin
    ctx.beginPath();
    ctx.arc(0, 0, sequin.radius, 0, 2 * Math.PI);
    ctx.fill();

    // reset transform matrix
    ctx.setTransform(1, 0, 0, 1, 0, 0);

    // clear rectangle where button cuts off
    if (sequin.velocity.y < 0) {
      ctx.clearRect(canvas.width / 2 - button.offsetWidth / 2, canvas.height / 2 + button.offsetHeight / 2, button.offsetWidth, button.offsetHeight);
    }
  });

  // remove confetti and sequins that fall off the screen
  // must be done in seperate loops to avoid noticeable flickering
  confetti.forEach((confetto, index) => {
    if (confetto.position.y >= canvas.height) confetti.splice(index, 1);
  });
  sequins.forEach((sequin, index) => {
    if (sequin.position.y >= canvas.height) sequins.splice(index, 1);
  });

  window.requestAnimationFrame(render);
};

// cycle through button states when clicked
clickButton = () => {
  if (!disabled) {
    disabled = true;
    // Loading stage
    button.classList.add('loading');
    button.classList.remove('ready');
    setTimeout(() => {
      // Completed stage
      button.classList.add('complete');
      button.classList.remove('loading');
      setTimeout(() => {
        window.initBurst();
        setTimeout(() => {
          // Reset button so user can select it again
          disabled = false;
          button.classList.add('ready');
          button.classList.remove('complete');
        }, 4000);
      }, 320);
    }, 1800);
  }
};

// re-init canvas if the window size changes
resizeCanvas = () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  cx = ctx.canvas.width / 2;
  cy = ctx.canvas.height / 2;
};

// resize listenter
window.addEventListener('resize', () => {
  resizeCanvas();
});

// click button on spacebar or return keypress
document.body.onkeyup = e => {
  if (e.keyCode == 13 || e.keyCode == 32) {
    clickButton();
  }
};

// Set up button text transition timings on page load
textElements = button.querySelectorAll('.button-text');
textElements.forEach(element => {
  characters = element.innerText.split('');
  let characterHTML = '';
  characters.forEach((letter, index) => {
    characterHTML += `<span class="char${index}" style="--d:${index * 30}ms; --dr:${(characters.length - index - 1) * 30}ms;">${letter}</span>`;
  });
  element.innerHTML = characterHTML;
});

// kick off the render loop
window.initBurst();
render();
    </script>
</body>
</html>

8. By Waaark

Made by Waaark. Another JavaScript button with Liquid animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
 
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Droid+Sans:700'>
<link rel='stylesheet' href='https://necolas.github.io/normalize.css/7.0.0/normalize.css'>
  
<style>
body {
	display: flex;
	height: 100vh;

	align-items: center;
	justify-content: center;
}

.btn-liquid {
	display: inline-block;
	position: relative;
	width: 240px;
	height: 60px;

	border-radius: 27px;

	color: #fff;
	font: 700 14px/60px "Droid Sans", sans-serif;
	letter-spacing: 0.05em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.btn-liquid .inner {
	position: relative;

	z-index: 2;
}

.btn-liquid canvas {
	position: absolute;
	top: -50px;
	right: -50px;
	bottom: -50px;
	left: -50px;

	z-index: 1;
}
</style>
</head>
<body>
  <a href="http://waaark.com" class="btn-liquid">
		<span class="inner">Liquid button ?</span>
</a>
  <script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
      <script>
$(function () {
  // Vars
  var pointsA = [],
  pointsB = [],
  $canvas = null,
  canvas = null,
  context = null,
  vars = null,
  points = 8,
  viscosity = 20,
  mouseDist = 70,
  damping = 0.05,
  showIndicators = false;
  mouseX = 0,
  mouseY = 0,
  relMouseX = 0,
  relMouseY = 0,
  mouseLastX = 0,
  mouseLastY = 0,
  mouseDirectionX = 0,
  mouseDirectionY = 0,
  mouseSpeedX = 0,
  mouseSpeedY = 0;

  /**
   * Get mouse direction
   */
  function mouseDirection(e) {
    if (mouseX < e.pageX)
    mouseDirectionX = 1;else
    if (mouseX > e.pageX)
    mouseDirectionX = -1;else

    mouseDirectionX = 0;

    if (mouseY < e.pageY)
    mouseDirectionY = 1;else
    if (mouseY > e.pageY)
    mouseDirectionY = -1;else

    mouseDirectionY = 0;

    mouseX = e.pageX;
    mouseY = e.pageY;

    relMouseX = mouseX - $canvas.offset().left;
    relMouseY = mouseY - $canvas.offset().top;
  }
  $(document).on('mousemove', mouseDirection);

  /**
   * Get mouse speed
   */
  function mouseSpeed() {
    mouseSpeedX = mouseX - mouseLastX;
    mouseSpeedY = mouseY - mouseLastY;

    mouseLastX = mouseX;
    mouseLastY = mouseY;

    setTimeout(mouseSpeed, 50);
  }
  mouseSpeed();

  /**
   * Init button
   */
  function initButton() {
    // Get button
    var button = $('.btn-liquid');
    var buttonWidth = button.width();
    var buttonHeight = button.height();

    // Create canvas
    $canvas = $('<canvas></canvas>');
    button.append($canvas);

    canvas = $canvas.get(0);
    canvas.width = buttonWidth + 100;
    canvas.height = buttonHeight + 100;
    context = canvas.getContext('2d');

    // Add points

    var x = buttonHeight / 2;
    for (var j = 1; j < points; j++) {
      addPoints(x + (buttonWidth - buttonHeight) / points * j, 0);
    }
    addPoints(buttonWidth - buttonHeight / 5, 0);
    addPoints(buttonWidth + buttonHeight / 10, buttonHeight / 2);
    addPoints(buttonWidth - buttonHeight / 5, buttonHeight);
    for (var j = points - 1; j > 0; j--) {
      addPoints(x + (buttonWidth - buttonHeight) / points * j, buttonHeight);
    }
    addPoints(buttonHeight / 5, buttonHeight);

    addPoints(-buttonHeight / 10, buttonHeight / 2);
    addPoints(buttonHeight / 5, 0);
    // addPoints(x, 0);
    // addPoints(0, buttonHeight/2);

    // addPoints(0, buttonHeight/2);
    // addPoints(buttonHeight/4, 0);

    // Start render
    renderCanvas();
  }

  /**
   * Add points
   */
  function addPoints(x, y) {
    pointsA.push(new Point(x, y, 1));
    pointsB.push(new Point(x, y, 2));
  }

  /**
   * Point
   */
  function Point(x, y, level) {
    this.x = this.ix = 50 + x;
    this.y = this.iy = 50 + y;
    this.vx = 0;
    this.vy = 0;
    this.cx1 = 0;
    this.cy1 = 0;
    this.cx2 = 0;
    this.cy2 = 0;
    this.level = level;
  }

  Point.prototype.move = function () {
    this.vx += (this.ix - this.x) / (viscosity * this.level);
    this.vy += (this.iy - this.y) / (viscosity * this.level);

    var dx = this.ix - relMouseX,
    dy = this.iy - relMouseY;
    var relDist = 1 - Math.sqrt(dx * dx + dy * dy) / mouseDist;

    // Move x
    if (mouseDirectionX > 0 && relMouseX > this.x || mouseDirectionX < 0 && relMouseX < this.x) {
      if (relDist > 0 && relDist < 1) {
        this.vx = mouseSpeedX / 4 * relDist;
      }
    }
    this.vx *= 1 - damping;
    this.x += this.vx;

    // Move y
    if (mouseDirectionY > 0 && relMouseY > this.y || mouseDirectionY < 0 && relMouseY < this.y) {
      if (relDist > 0 && relDist < 1) {
        this.vy = mouseSpeedY / 4 * relDist;
      }
    }
    this.vy *= 1 - damping;
    this.y += this.vy;
  };


  /**
   * Render canvas
   */
  function renderCanvas() {
    // rAF
    rafID = requestAnimationFrame(renderCanvas);

    // Clear scene
    context.clearRect(0, 0, $canvas.width(), $canvas.height());
    context.fillStyle = '#fff';
    context.fillRect(0, 0, $canvas.width(), $canvas.height());

    // Move points
    for (var i = 0; i <= pointsA.length - 1; i++) {
      pointsA[i].move();
      pointsB[i].move();
    }

    // Create dynamic gradient
    var gradientX = Math.min(Math.max(mouseX - $canvas.offset().left, 0), $canvas.width());
    var gradientY = Math.min(Math.max(mouseY - $canvas.offset().top, 0), $canvas.height());
    var distance = Math.sqrt(Math.pow(gradientX - $canvas.width() / 2, 2) + Math.pow(gradientY - $canvas.height() / 2, 2)) / Math.sqrt(Math.pow($canvas.width() / 2, 2) + Math.pow($canvas.height() / 2, 2));

    var gradient = context.createRadialGradient(gradientX, gradientY, 300 + 300 * distance, gradientX, gradientY, 0);
    gradient.addColorStop(0, '#102ce5');
    gradient.addColorStop(1, '#E406D6');

    // Draw shapes
    var groups = [pointsA, pointsB];

    for (var j = 0; j <= 1; j++) {
      var points = groups[j];

      if (j == 0) {
        // Background style
        context.fillStyle = '#1CE2D8';
      } else {
        // Foreground style
        context.fillStyle = gradient;
      }

      context.beginPath();
      context.moveTo(points[0].x, points[0].y);

      for (var i = 0; i < points.length; i++) {
        var p = points[i];
        var nextP = points[i + 1];
        var val = 30 * 0.552284749831;

        if (nextP != undefined) {
          // if (nextP.ix > p.ix && nextP.iy < p.iy) {
          // 	p.cx1 = p.x;
          // 	p.cy1 = p.y-val;
          // 	p.cx2 = nextP.x-val;
          // 	p.cy2 = nextP.y;
          // } else if (nextP.ix > p.ix && nextP.iy > p.iy) {
          // 	p.cx1 = p.x+val;
          // 	p.cy1 = p.y;
          // 	p.cx2 = nextP.x;
          // 	p.cy2 = nextP.y-val;
          // }  else if (nextP.ix < p.ix && nextP.iy > p.iy) {
          // 	p.cx1 = p.x;
          // 	p.cy1 = p.y+val;
          // 	p.cx2 = nextP.x+val;
          // 	p.cy2 = nextP.y;
          // } else if (nextP.ix < p.ix && nextP.iy < p.iy) {
          // 	p.cx1 = p.x-val;
          // 	p.cy1 = p.y;
          // 	p.cx2 = nextP.x;
          // 	p.cy2 = nextP.y+val;
          // } else {

          p.cx1 = (p.x + nextP.x) / 2;
          p.cy1 = (p.y + nextP.y) / 2;
          p.cx2 = (p.x + nextP.x) / 2;
          p.cy2 = (p.y + nextP.y) / 2;

          context.bezierCurveTo(p.x, p.y, p.cx1, p.cy1, p.cx1, p.cy1);
          // 	continue;
          // }

          // context.bezierCurveTo(p.cx1, p.cy1, p.cx2, p.cy2, nextP.x, nextP.y);
        } else {
          nextP = points[0];
          p.cx1 = (p.x + nextP.x) / 2;
          p.cy1 = (p.y + nextP.y) / 2;

          context.bezierCurveTo(p.x, p.y, p.cx1, p.cy1, p.cx1, p.cy1);
        }
      }

      // context.closePath();
      context.fill();
    }

    if (showIndicators) {
      // Draw points
      context.fillStyle = '#000';
      context.beginPath();
      for (var i = 0; i < pointsA.length; i++) {
        var p = pointsA[i];

        context.rect(p.x - 1, p.y - 1, 2, 2);
      }
      context.fill();

      // Draw controls
      context.fillStyle = '#f00';
      context.beginPath();
      for (var i = 0; i < pointsA.length; i++) {
        var p = pointsA[i];

        context.rect(p.cx1 - 1, p.cy1 - 1, 2, 2);
        context.rect(p.cx2 - 1, p.cy2 - 1, 2, 2);
      }
      context.fill();
    }
  }

  // Init
  initButton();
});
//# sourceURL=pen.js
    </script>
</body>
</html>

9. By Joshua Ward

Made by Joshua Ward. Button with simple loading animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
  
<style>
*, *:before, *:after {
  box-sizing: border-box;
  outline: none;
}

html {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-smooth: auto;
  font-weight: 300;
  line-height: 1.5;
  color: #444;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.hide {
  display: none;
}

.button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 12.5rem;
  magrin: 0;
  padding: 1.5rem 3.125rem;
  background-color: #3498db;
  border: none;
  border-radius: 0.3125rem;
  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);
  color: white;
  font-weight: 300;
  text-transform: uppercase;
  overflow: hidden;
}
.button:before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #54d98c;
}
.button span {
  position: absolute;
  line-height: 0;
}
.button span i {
  transform-origin: center center;
}
.button span:nth-of-type(1) {
  top: 50%;
  transform: translateY(-50%);
}
.button span:nth-of-type(2) {
  top: 100%;
  transform: translateY(0%);
  font-size: 24px;
}
.button span:nth-of-type(3) {
  display: none;
}

.active {
  background-color: #2ecc71;
}
.active:before {
  width: 100%;
  transition: width 3s linear;
}
.active span:nth-of-type(1) {
  top: -100%;
  transform: translateY(-50%);
}
.active span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}
.active span:nth-of-type(2) i {
  animation: loading 500ms linear infinite;
}
.active span:nth-of-type(3) {
  display: none;
}

.finished {
  background-color: #54d98c;
}
.finished .submit {
  display: none;
}
.finished .loading {
  display: none;
}
.finished .check {
  display: block !important;
  font-size: 24px;
  animation: scale 0.5s linear;
}
.finished .check i {
  transform-origin: center center;
}

@keyframes loading {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes scale {
  0% {
    transform: scale(10);
  }
  50% {
    transform: scale(0.2);
  }
  70% {
    transform: scale(1.2);
  }
  90% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}
</style>
</head>
<body>
  <button class="button">
	<span class="submit">Submit</span>
	<span class="loading"><i class="fa fa-refresh"></i></span>
	<span class="check"><i class="fa fa-check"></i></span>
</button>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://use.fontawesome.com/2473308824.js'></script>
      <script>
const button = document.querySelector('.button');
const submit = document.querySelector('.submit');

function toggleClass() {
  this.classList.toggle('active');
}

function addClass() {
  this.classList.add('finished');
}

button.addEventListener('click', toggleClass);
button.addEventListener('transitionend', toggleClass);
button.addEventListener('transitionend', addClass);
    </script>
</body>
</html>

10. By Adam Kuhn

Made by Adam Kuhn. Download button with amazing loading animation. Source


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<style>
body {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  font-family: "Source Code Pro";
}
body svg {
  position: absolute;
  width: 0;
  height: 0;
}
body .btn {
  text-transform: uppercase;
  letter-spacing: 5px;
  padding: 20px 40px;
  transform-origin: 100% 50%;
  color: #fff;
  position: relative;
}
body .btn span {
  transition: 0.2s ease-in-out;
}
body .btn:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ff00b8;
  left: 0;
  top: 0;
  border-radius: 75px;
  z-index: -1;
  transition-delay: 1s;
  transition: 0.4s ease-in-out;
}
body .btn div {
  width: 100%;
  height: 400%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -2;
  filter: url("#goo");
}
body .btn div:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 25%;
  left: 0;
  bottom: 0;
  background: #ff00b8;
}
body .btn div:before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  left: 0px;
  bottom: 0px;
  border-radius: 100%;
  background: #ff00b8;
}
body .btn.loading {
  -webkit-animation: flick 7s ease-in-out 1 forwards;
          animation: flick 7s ease-in-out 1 forwards;
}
body .btn.loading:before {
  border-radius: 0px;
  box-shadow: inset 0 0 0 3px #ff00b8;
  transition-delay: 1.3s;
  -webkit-animation: loading 5s ease-in-out 1 forwards;
          animation: loading 5s ease-in-out 1 forwards;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  box-sizing: border-box;
}
@-webkit-keyframes loading {
  0% {
    background: repeating-linear-gradient(45deg, #ff00b8, #ff00b8 5px, #fff 5px, #fff 10px);
    background-position: -500px 50%;
    background-size: 925%;
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    padding: 20px 40px;
  }
  97.5% {
    background: repeating-linear-gradient(45deg, #ff00b8, #ff00b8 5px, #fff 5px, #fff 10px);
    background-position: -900px 50%;
    background-size: 925%;
    box-shadow: inset 0 0 0 3px #ff00b8;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    content: "";
    color: #1f00ff;
    padding: 20px 40px;
    z-index: -1;
  }
  100% {
    background: #fff;
    background-position: -900px 50%;
    background-size: 925%;
    box-shadow: inset 0 0 0 3px #1f00ff;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    content: "COMPLETE!";
    color: #1f00ff;
    padding: 20px 40px;
    font-weight: 900;
    z-index: 9;
  }
}
@keyframes loading {
  0% {
    background: repeating-linear-gradient(45deg, #ff00b8, #ff00b8 5px, #fff 5px, #fff 10px);
    background-position: -500px 50%;
    background-size: 925%;
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    padding: 20px 40px;
  }
  97.5% {
    background: repeating-linear-gradient(45deg, #ff00b8, #ff00b8 5px, #fff 5px, #fff 10px);
    background-position: -900px 50%;
    background-size: 925%;
    box-shadow: inset 0 0 0 3px #ff00b8;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    content: "";
    color: #1f00ff;
    padding: 20px 40px;
    z-index: -1;
  }
  100% {
    background: #fff;
    background-position: -900px 50%;
    background-size: 925%;
    box-shadow: inset 0 0 0 3px #1f00ff;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    content: "COMPLETE!";
    color: #1f00ff;
    padding: 20px 40px;
    font-weight: 900;
    z-index: 9;
  }
}
body .btn.loading div:before {
  -webkit-animation: plop 1.75s ease-out forwards;
          animation: plop 1.75s ease-out forwards;
}
@-webkit-keyframes plop {
  0% {
    transform: translateX(0px) translateY(0px);
  }
  40% {
    transform: translateX(0px) translateY(0px);
  }
  70% {
    transform: translateX(100px) translateY(-150px);
    background: #ff00b8;
  }
  90% {
    transform: translateX(200px) translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(200px) translateY(0px);
    opacity: 0;
  }
}
@keyframes plop {
  0% {
    transform: translateX(0px) translateY(0px);
  }
  40% {
    transform: translateX(0px) translateY(0px);
  }
  70% {
    transform: translateX(100px) translateY(-150px);
    background: #ff00b8;
  }
  90% {
    transform: translateX(200px) translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(200px) translateY(0px);
    opacity: 0;
  }
}
body .btn.loading span {
  -webkit-animation: slide 1s ease-in-out 1 forwards;
          animation: slide 1s ease-in-out 1 forwards;
  transition-delay: 6.75s;
  color: #1f00ff;
}
@-webkit-keyframes flick {
  0% {
    transform: rotate(0deg);
  }
  10.5% {
    transform: rotate(-15deg);
  }
  12% {
    transform: rotate(15deg);
  }
  13% {
    transform: rotate(0deg);
  }
  21% {
    transform: rotate(0deg);
    padding-left: 60px;
    padding-right: 60px;
  }
  97.5% {
    transform: rotate(0deg);
    padding-left: 40px;
    padding-right: 80px;
  }
  100% {
    transform: rotate(0deg);
    padding-left: 40px;
    padding-right: 40px;
  }
}
@keyframes flick {
  0% {
    transform: rotate(0deg);
  }
  10.5% {
    transform: rotate(-15deg);
  }
  12% {
    transform: rotate(15deg);
  }
  13% {
    transform: rotate(0deg);
  }
  21% {
    transform: rotate(0deg);
    padding-left: 60px;
    padding-right: 60px;
  }
  97.5% {
    transform: rotate(0deg);
    padding-left: 40px;
    padding-right: 80px;
  }
  100% {
    transform: rotate(0deg);
    padding-left: 40px;
    padding-right: 40px;
  }
}
body .btn span {
  display: inline-block;
}
body .btn span:nth-of-type(1) {
  -webkit-animation-delay: 0.0142857143s;
          animation-delay: 0.0142857143s;
}
body .btn span:nth-of-type(2) {
  -webkit-animation-delay: 0.0285714286s;
          animation-delay: 0.0285714286s;
}
body .btn span:nth-of-type(3) {
  -webkit-animation-delay: 0.0428571429s;
          animation-delay: 0.0428571429s;
}
body .btn span:nth-of-type(4) {
  -webkit-animation-delay: 0.0571428571s;
          animation-delay: 0.0571428571s;
}
body .btn span:nth-of-type(5) {
  -webkit-animation-delay: 0.0714285714s;
          animation-delay: 0.0714285714s;
}
body .btn span:nth-of-type(6) {
  -webkit-animation-delay: 0.0857142857s;
          animation-delay: 0.0857142857s;
}
body .btn span:nth-of-type(7) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
body .btn span:nth-of-type(8) {
  -webkit-animation-delay: 0.1142857143s;
          animation-delay: 0.1142857143s;
}
body .btn span:nth-of-type(9) {
  -webkit-animation-delay: 0.1285714286s;
          animation-delay: 0.1285714286s;
}
body .btn span:nth-of-type(10) {
  -webkit-animation-delay: 0.1428571429s;
          animation-delay: 0.1428571429s;
}
body .btn span:nth-of-type(11) {
  -webkit-animation-delay: 0.1571428571s;
          animation-delay: 0.1571428571s;
}
body .btn span:nth-of-type(12) {
  -webkit-animation-delay: 0.1714285714s;
          animation-delay: 0.1714285714s;
}
body .btn span:nth-of-type(13) {
  -webkit-animation-delay: 0.1857142857s;
          animation-delay: 0.1857142857s;
}
body .btn span:nth-of-type(14) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
body .btn span:nth-of-type(15) {
  -webkit-animation-delay: 0.2142857143s;
          animation-delay: 0.2142857143s;
}
body .btn span:nth-of-type(16) {
  -webkit-animation-delay: 0.2285714286s;
          animation-delay: 0.2285714286s;
}
body .btn span:nth-of-type(17) {
  -webkit-animation-delay: 0.2428571429s;
          animation-delay: 0.2428571429s;
}
body .btn span:nth-of-type(18) {
  -webkit-animation-delay: 0.2571428571s;
          animation-delay: 0.2571428571s;
}
body .btn span:nth-of-type(19) {
  -webkit-animation-delay: 0.2714285714s;
          animation-delay: 0.2714285714s;
}
body .btn span:nth-of-type(20) {
  -webkit-animation-delay: 0.2857142857s;
          animation-delay: 0.2857142857s;
}
body .btn span:nth-of-type(21) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
body .btn span:nth-of-type(22) {
  -webkit-animation-delay: 0.3142857143s;
          animation-delay: 0.3142857143s;
}
body .btn span:nth-of-type(23) {
  -webkit-animation-delay: 0.3285714286s;
          animation-delay: 0.3285714286s;
}
body .btn span:nth-of-type(24) {
  -webkit-animation-delay: 0.3428571429s;
          animation-delay: 0.3428571429s;
}
body .btn span:nth-of-type(25) {
  -webkit-animation-delay: 0.3571428571s;
          animation-delay: 0.3571428571s;
}
body .btn span:nth-of-type(26) {
  -webkit-animation-delay: 0.3714285714s;
          animation-delay: 0.3714285714s;
}
body .btn span:nth-of-type(27) {
  -webkit-animation-delay: 0.3857142857s;
          animation-delay: 0.3857142857s;
}
body .btn span:nth-of-type(28) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
body .btn span:nth-of-type(29) {
  -webkit-animation-delay: 0.4142857143s;
          animation-delay: 0.4142857143s;
}
body .btn span:nth-of-type(30) {
  -webkit-animation-delay: 0.4285714286s;
          animation-delay: 0.4285714286s;
}
body .btn span:nth-of-type(31) {
  -webkit-animation-delay: 0.4428571429s;
          animation-delay: 0.4428571429s;
}
body .btn span:nth-of-type(32) {
  -webkit-animation-delay: 0.4571428571s;
          animation-delay: 0.4571428571s;
}
body .btn span:nth-of-type(33) {
  -webkit-animation-delay: 0.4714285714s;
          animation-delay: 0.4714285714s;
}
body .btn span:nth-of-type(34) {
  -webkit-animation-delay: 0.4857142857s;
          animation-delay: 0.4857142857s;
}
body .btn span:nth-of-type(35) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
body .btn span:nth-of-type(36) {
  -webkit-animation-delay: 0.5142857143s;
          animation-delay: 0.5142857143s;
}
body .btn span:nth-of-type(37) {
  -webkit-animation-delay: 0.5285714286s;
          animation-delay: 0.5285714286s;
}
body .btn span:nth-of-type(38) {
  -webkit-animation-delay: 0.5428571429s;
          animation-delay: 0.5428571429s;
}
body .btn span:nth-of-type(39) {
  -webkit-animation-delay: 0.5571428571s;
          animation-delay: 0.5571428571s;
}
body .btn span:nth-of-type(40) {
  -webkit-animation-delay: 0.5714285714s;
          animation-delay: 0.5714285714s;
}
body .btn span:nth-of-type(41) {
  -webkit-animation-delay: 0.5857142857s;
          animation-delay: 0.5857142857s;
}
body .btn span:nth-of-type(42) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
body .btn span:nth-of-type(43) {
  -webkit-animation-delay: 0.6142857143s;
          animation-delay: 0.6142857143s;
}
body .btn span:nth-of-type(44) {
  -webkit-animation-delay: 0.6285714286s;
          animation-delay: 0.6285714286s;
}
body .btn span:nth-of-type(45) {
  -webkit-animation-delay: 0.6428571429s;
          animation-delay: 0.6428571429s;
}
body .btn span:nth-of-type(46) {
  -webkit-animation-delay: 0.6571428571s;
          animation-delay: 0.6571428571s;
}
body .btn span:nth-of-type(47) {
  -webkit-animation-delay: 0.6714285714s;
          animation-delay: 0.6714285714s;
}
body .btn span:nth-of-type(48) {
  -webkit-animation-delay: 0.6857142857s;
          animation-delay: 0.6857142857s;
}
body .btn span:nth-of-type(49) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
body .btn span:nth-of-type(50) {
  -webkit-animation-delay: 0.7142857143s;
          animation-delay: 0.7142857143s;
}
body .btn span:nth-of-type(51) {
  -webkit-animation-delay: 0.7285714286s;
          animation-delay: 0.7285714286s;
}
body .btn span:nth-of-type(52) {
  -webkit-animation-delay: 0.7428571429s;
          animation-delay: 0.7428571429s;
}
body .btn span:nth-of-type(53) {
  -webkit-animation-delay: 0.7571428571s;
          animation-delay: 0.7571428571s;
}
body .btn span:nth-of-type(54) {
  -webkit-animation-delay: 0.7714285714s;
          animation-delay: 0.7714285714s;
}
body .btn span:nth-of-type(55) {
  -webkit-animation-delay: 0.7857142857s;
          animation-delay: 0.7857142857s;
}
body .btn span:nth-of-type(56) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
body .btn span:nth-of-type(57) {
  -webkit-animation-delay: 0.8142857143s;
          animation-delay: 0.8142857143s;
}
body .btn span:nth-of-type(58) {
  -webkit-animation-delay: 0.8285714286s;
          animation-delay: 0.8285714286s;
}
body .btn span:nth-of-type(59) {
  -webkit-animation-delay: 0.8428571429s;
          animation-delay: 0.8428571429s;
}
body .btn span:nth-of-type(60) {
  -webkit-animation-delay: 0.8571428571s;
          animation-delay: 0.8571428571s;
}
body .btn span:nth-of-type(61) {
  -webkit-animation-delay: 0.8714285714s;
          animation-delay: 0.8714285714s;
}
body .btn span:nth-of-type(62) {
  -webkit-animation-delay: 0.8857142857s;
          animation-delay: 0.8857142857s;
}
body .btn span:nth-of-type(63) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
body .btn span:nth-of-type(64) {
  -webkit-animation-delay: 0.9142857143s;
          animation-delay: 0.9142857143s;
}
body .btn span:nth-of-type(65) {
  -webkit-animation-delay: 0.9285714286s;
          animation-delay: 0.9285714286s;
}
body .btn span:nth-of-type(66) {
  -webkit-animation-delay: 0.9428571429s;
          animation-delay: 0.9428571429s;
}
body .btn span:nth-of-type(67) {
  -webkit-animation-delay: 0.9571428571s;
          animation-delay: 0.9571428571s;
}
body .btn span:nth-of-type(68) {
  -webkit-animation-delay: 0.9714285714s;
          animation-delay: 0.9714285714s;
}
body .btn span:nth-of-type(69) {
  -webkit-animation-delay: 0.9857142857s;
          animation-delay: 0.9857142857s;
}
body .btn span:nth-of-type(70) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
body .btn span:nth-of-type(71) {
  -webkit-animation-delay: 1.0142857143s;
          animation-delay: 1.0142857143s;
}
body .btn span:nth-of-type(72) {
  -webkit-animation-delay: 1.0285714286s;
          animation-delay: 1.0285714286s;
}
body .btn span:nth-of-type(73) {
  -webkit-animation-delay: 1.0428571429s;
          animation-delay: 1.0428571429s;
}
body .btn span:nth-of-type(74) {
  -webkit-animation-delay: 1.0571428571s;
          animation-delay: 1.0571428571s;
}
body .btn span:nth-of-type(75) {
  -webkit-animation-delay: 1.0714285714s;
          animation-delay: 1.0714285714s;
}
body .btn span:nth-of-type(76) {
  -webkit-animation-delay: 1.0857142857s;
          animation-delay: 1.0857142857s;
}
body .btn span:nth-of-type(77) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
body .btn span:nth-of-type(78) {
  -webkit-animation-delay: 1.1142857143s;
          animation-delay: 1.1142857143s;
}
body .btn span:nth-of-type(79) {
  -webkit-animation-delay: 1.1285714286s;
          animation-delay: 1.1285714286s;
}
body .btn span:nth-of-type(80) {
  -webkit-animation-delay: 1.1428571429s;
          animation-delay: 1.1428571429s;
}
body .btn span:nth-of-type(81) {
  -webkit-animation-delay: 1.1571428571s;
          animation-delay: 1.1571428571s;
}
body .btn span:nth-of-type(82) {
  -webkit-animation-delay: 1.1714285714s;
          animation-delay: 1.1714285714s;
}
body .btn span:nth-of-type(83) {
  -webkit-animation-delay: 1.1857142857s;
          animation-delay: 1.1857142857s;
}
body .btn span:nth-of-type(84) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
body .btn span:nth-of-type(85) {
  -webkit-animation-delay: 1.2142857143s;
          animation-delay: 1.2142857143s;
}
body .btn span:nth-of-type(86) {
  -webkit-animation-delay: 1.2285714286s;
          animation-delay: 1.2285714286s;
}
body .btn span:nth-of-type(87) {
  -webkit-animation-delay: 1.2428571429s;
          animation-delay: 1.2428571429s;
}
body .btn span:nth-of-type(88) {
  -webkit-animation-delay: 1.2571428571s;
          animation-delay: 1.2571428571s;
}
body .btn span:nth-of-type(89) {
  -webkit-animation-delay: 1.2714285714s;
          animation-delay: 1.2714285714s;
}
body .btn span:nth-of-type(90) {
  -webkit-animation-delay: 1.2857142857s;
          animation-delay: 1.2857142857s;
}
body .btn span:nth-of-type(91) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
body .btn span:nth-of-type(92) {
  -webkit-animation-delay: 1.3142857143s;
          animation-delay: 1.3142857143s;
}
body .btn span:nth-of-type(93) {
  -webkit-animation-delay: 1.3285714286s;
          animation-delay: 1.3285714286s;
}
body .btn span:nth-of-type(94) {
  -webkit-animation-delay: 1.3428571429s;
          animation-delay: 1.3428571429s;
}
body .btn span:nth-of-type(95) {
  -webkit-animation-delay: 1.3571428571s;
          animation-delay: 1.3571428571s;
}
body .btn span:nth-of-type(96) {
  -webkit-animation-delay: 1.3714285714s;
          animation-delay: 1.3714285714s;
}
body .btn span:nth-of-type(97) {
  -webkit-animation-delay: 1.3857142857s;
          animation-delay: 1.3857142857s;
}
body .btn span:nth-of-type(98) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
body .btn span:nth-of-type(99) {
  -webkit-animation-delay: 1.4142857143s;
          animation-delay: 1.4142857143s;
}
body .btn span:nth-of-type(100) {
  -webkit-animation-delay: 1.4285714286s;
          animation-delay: 1.4285714286s;
}
@-webkit-keyframes slide {
  0% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(-20px) rotate(-5deg);
  }
  90% {
    transform: translateX(2px) rotate(1deg);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(-20px) rotate(-5deg);
  }
  90% {
    transform: translateX(2px) rotate(1deg);
  }
  100% {
    transform: translateX(0);
  }
}
</style>
</head>
<body translate="no" >
  <a class="btn"><b>Download</b><div></div></a>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
<svg class="svg" viewBox="0 0 400 400">
<defs>
<filter id="duotone-filter-post-one">
<feColorMatrix type="matrix" values="0.14453125 0 0 0 0.33203125 0.71875 0 0 0 0.27734375 -0.34765625 0 0 0 0.73046875 0 0 0 1 0"></feColorMatrix>
</filter>
</defs>
</svg>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script>
$("a b").html(function (index, html) {
  return html.replace(/\S/g, '<span>$&</span>');
});

$("a").click(function () {
  $("a").addClass("loading");
  setTimeout(function () {
    $("a").removeClass("loading");
  }, 8000);

});
    </script>
</body>
</html>
 

11. By Aaron Iker

Another Js button by Aaron Iker. It has loading and success animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Mukta+Malar:400,500,600'>
  
<style>
.activate {
  display: table;
  background: #5628EE;
  box-shadow: 0 4px 20px rgba(86, 40, 238, 0.15);
  line-height: 20px;
  padding: 12px;
  border-radius: 22px;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.activate span {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  margin: 0 4px 0 0;
  position: relative;
  overflow: hidden;
}
.activate span:before {
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: #5628EE;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.3s ease, background 0.3s ease;
}
.activate span svg {
  position: absolute;
  width: 12px;
  height: 12px;
  left: 50%;
  top: 50%;
  margin: -6px 0 0 -6px;
  z-index: 1;
}
.activate span svg:nth-child(1) {
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  fill: none;
  margin: 0;
  stroke: #fff;
  stroke-width: 1px;
  stroke-dashoffset: 94.248;
  stroke-dasharray: 47.124;
}
.activate span svg:nth-child(2) {
  fill: #5628EE;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.activate span svg:nth-child(3) {
  fill: #5628EE;
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}
.activate:hover {
  box-shadow: 0 8px 24px rgba(86, 40, 238, 0.15);
}
.activate:hover span svg:nth-child(2) {
  transform: translateY(-20px);
}
.activate:hover span svg:nth-child(3) {
  transform: translateY(0);
}
.activate:active {
  transform: scale(0.94);
  box-shadow: 0 4px 16px rgba(63, 220, 117, 0.18);
}
.activate.loading span {
  background: none;
  transition: background 0.1s ease 0.3s;
}
.activate.loading span:before {
  transform: scale(1);
}
.activate.loading span svg:nth-child(1) {
  -webkit-animation: turn 1.6s linear infinite forwards, path 1.6s linear infinite forwards;
          animation: turn 1.6s linear infinite forwards, path 1.6s linear infinite forwards;
}
.activate.loading span svg:nth-child(2) {
  transform: translateY(-20px);
}
.activate.loading span svg:nth-child(3) {
  opacity: 0;
  transform: translateY(0) scale(0.6);
}
.activate.loading ul {
  transform: rotateX(90deg);
}
.activate.loading.done {
  background: #3FDC75;
  box-shadow: 0 4px 20px rgba(63, 220, 117, 0.15);
}
.activate.loading.done span {
  background: #fff;
  transition: background 0.1s ease 0s;
}
.activate.loading.done span:before {
  background: #3FDC75;
  transform: scale(0);
}
.activate.loading.done span svg:nth-child(1) {
  -webkit-animation: none;
          animation: none;
}
.activate.loading.done span svg:nth-child(3) {
  fill: #3FDC75;
  opacity: 1;
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, opacity 0.4s ease 0.25s;
}
.activate.loading.done ul {
  transform: rotateX(180deg);
}
.activate ul {
  padding: 0;
  margin: 0;
  list-style: none;
  height: 20px;
  width: 70px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}
.activate ul li {
  --rotateX: 0deg;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  transform-origin: 50% 50%;
  transform: rotateX(var(--rotateX)) translateZ(10px);
}
.activate ul li:nth-child(2) {
  --rotateX: -90deg;
}
.activate ul li:nth-child(3) {
  --rotateX: -180deg;
}

@-webkit-keyframes turn {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes turn {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes path {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes path {
  100% {
    stroke-dashoffset: 0;
  }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  font-family: "Mukta Malar", Arial;
  color: #ADAFB6;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  height: 28px;
}
</style>
</head>
<body>
  <a class="activate">
    <span>
        <svg>
            <use xlink:href="#circle">
        </svg>
        <svg>
            <use xlink:href="#arrow">
        </svg>
        <svg>
            <use xlink:href="#check">
        </svg>
    </span>
    <ul>
        <li>Activate</li>
        <li>Waiting</li>
        <li>Activated</li>
    </ul>
</a>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="circle">
        <circle cx="8" cy="8" r="7.5"></circle>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" id="arrow">
        <path d="M2.7008908,5.37931459 L2.7008908,5.37931459 C2.9224607,5.60207651 3.2826628,5.60304283 3.50542472,5.38147293 C3.52232305,5.36466502 3.53814843,5.34681177 3.55280728,5.32801875 L5.34805194,3.02646954 L5.34805194,10.3480519 C5.34805194,10.7081129 5.63993903,11 6,11 L6,11 C6.36006097,11 6.65194806,10.7081129 6.65194806,10.3480519 L6.65194806,3.02646954 L8.44719272,5.32801875 C8.6404327,5.57575732 8.99791646,5.61993715 9.24565503,5.42669716 C9.26444805,5.41203831 9.28230129,5.39621293 9.2991092,5.37931459 L9.2991092,5.37931459 C9.55605877,5.12098268 9.57132199,4.70855346 9.33416991,4.43193577 L6.75918715,1.42843795 C6.39972025,1.00915046 5.76841509,0.960656296 5.34912761,1.32012319 C5.31030645,1.35340566 5.27409532,1.38961679 5.24081285,1.42843795 L2.66583009,4.43193577 C2.42867801,4.70855346 2.44394123,5.12098268 2.7008908,5.37931459 Z"></path>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" id="check">
            <path id="test" d="M4.76499011,6.7673683 L8.2641848,3.26100386 C8.61147835,2.91299871 9.15190114,2.91299871 9.49919469,3.26100386 C9.51164115,3.27347582 9.52370806,3.28637357 9.53537662,3.29967699 C9.83511755,3.64141434 9.81891834,4.17816549 9.49919469,4.49854425 L5.18121271,8.82537365 C4.94885368,9.05820878 4.58112654,9.05820878 4.34876751,8.82537365 L2.50080531,6.97362503 C2.48835885,6.96115307 2.47629194,6.94825532 2.46462338,6.93495189 C2.16488245,6.59321455 2.18108166,6.0564634 2.50080531,5.73608464 C2.84809886,5.3880795 3.38852165,5.3880795 3.7358152,5.73608464 L4.76499011,6.7673683 Z"></path>
    </symbol>
</svg>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/5709751-Activate-Button" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$('.activate').on('click touch', function (e) {
  var self = $(this);
  if (!self.hasClass('loading')) {
    self.addClass('loading');
    setTimeout(function () {
      self.addClass('done');
      setTimeout(function () {
        self.removeClass('loading done');
      }, 1600);
    }, 3200);
  }
});
    </script>
</body>
</html>

12. By Martin Machycek

Made by Martin Machycek. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://www.dropbox.com/s/udfqeb2pkbcv3be/styles.css'>
  
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

body {
  text-align: center;
  font-family: "Lato";
}

.wrap {
  position: relative;
  margin: auto;
  margin-top: 5%;
  width: 191px;
  text-align: center;
}
.wrap button {
  display: block;
  height: 60px;
  padding: 0;
  width: 191px;
  background: none;
  margin: auto;
  border: 2px solid #1ECD97;
  font-size: 18px;
  font-family: "Lato";
  color: #1ECD97;
  cursor: pointer;
  outline: none;
  text-align: center;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  -moz-transition: background 0.4s, color 0.4s, font-size 0.05s, width 0.4s, border 0.4s;
  -o-transition: background 0.4s, color 0.4s, font-size 0.05s, width 0.4s, border 0.4s;
  -webkit-transition: background 0.4s, color 0.4s, font-size 0.05s, width 0.4s, border 0.4s;
  transition: background 0.4s, color 0.4s, font-size 0.05s, width 0.4s, border 0.4s;
}
.wrap button:hover {
  background: #1ECD97;
  color: white;
}
.wrap img {
  position: absolute;
  top: 11px;
  display: none;
  left: 71.5px;
  -moz-transform: scale(0.6, 0.6);
  -ms-transform: scale(0.6, 0.6);
  -webkit-transform: scale(0.6, 0.6);
  transform: scale(0.6, 0.6);
}
.wrap svg {
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  /* @include rotate(270deg); */
  position: absolute;
  top: -2px;
  left: 62px;
  display: none;
}
.wrap svg .circle_2 {
  stroke-dasharray: 0 200;
}
.wrap svg .fill_circle {
  -moz-animation: fill-stroke 2s 0.4s linear forwards;
  -webkit-animation: fill-stroke 2s 0.4s linear forwards;
  animation: fill-stroke 2s 0.4s linear forwards;
}
.wrap .circle {
  width: 60px;
  border: 3px solid #c3c3c3;
  /* border: none; */
}
.wrap .circle:hover {
  background: none;
}
.wrap .filled {
  background: #1ECD97;
  color: white;
  line-height: 60px;
  font-size: 160%;
}

footer p {
  color: #738087;
  margin-top: 100px;
  font-size: 18px;
  line-height: 28px;
}

@-moz-keyframes fill-stroke {
  0% {
    stroke-dasharray: 0 200;
  }
  20% {
    stroke-dasharray: 20 200;
  }
  40% {
    stroke-dasharray: 30 200;
  }
  50% {
    stroke-dasharray: 90 200;
  }
  70% {
    stroke-dasharray: 120 200;
  }
  90% {
    stroke-dasharray: 140 200;
  }
  100% {
    stroke-dasharray: 182 200;
  }
}
@-webkit-keyframes fill-stroke {
  0% {
    stroke-dasharray: 0 200;
  }
  20% {
    stroke-dasharray: 20 200;
  }
  40% {
    stroke-dasharray: 30 200;
  }
  50% {
    stroke-dasharray: 90 200;
  }
  70% {
    stroke-dasharray: 120 200;
  }
  90% {
    stroke-dasharray: 140 200;
  }
  100% {
    stroke-dasharray: 182 200;
  }
}
@keyframes fill-stroke {
  0% {
    stroke-dasharray: 0 200;
  }
  20% {
    stroke-dasharray: 20 200;
  }
  40% {
    stroke-dasharray: 30 200;
  }
  50% {
    stroke-dasharray: 90 200;
  }
  70% {
    stroke-dasharray: 120 200;
  }
  90% {
    stroke-dasharray: 140 200;
  }
  100% {
    stroke-dasharray: 182 200;
  }
}
a, p {
  line-height: 1.6em;
}

a {
  color: #738087;
}
</style>
</head>
<body>
  <div class="wrap">
    <button type="submit">Submit</button>
    <img src="https://www.dropbox.com/s/qfu4871umzhlcfo/check_arrow_2.svg?dl=1" alt="">
    <svg width="66px" height="66px">
      <circle class="circle_2" stroke-position="outside" stroke-width="3" fill="none" cx="34" cy="33" r="29" stroke="#1ECD97"></circle>
    </svg>
  </div>
  <footer>
    <p>Thanks for checking this pen</p>
    <a href="http://machycek.com">See more</a
  </footer>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  var timer = null;
  var self = $("button");
  var clicked = false;
  $("button").on("click", function () {
    if (clicked === false) {
      self.removeClass("filled");
      self.addClass("circle");
      self.html("");
      clicked = true;
      $("svg").css("display", "block");
      $(".circle_2").attr("class", "circle_2 fill_circle");

      timer = setInterval(
      function tick() {
        self.removeClass("circle");
        self.addClass("filled");
        // self.html("b");
        $(".wrap img").css("display", "block");
        $("svg").css("display", "none");
        clearInterval(timer);
      }, 2500);
    }
  });
});
    </script>
</body>
</html>

13. By Nour Saud

Made by Nour Saud. Button with bubble animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
body {
  font-size: 16px;
  font-family: "Helvetica", "Arial", sans-serif;
  text-align: center;
  background-color: #f8faff;
}

.bubbly-button {
  font-family: "Helvetica", "Arial", sans-serif;
  display: inline-block;
  font-size: 1em;
  padding: 1em 2em;
  margin-top: 100px;
  margin-bottom: 60px;
  -webkit-appearance: none;
  appearance: none;
  background-color: #ff0081;
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
.bubbly-button:focus {
  outline: 0;
}
.bubbly-button:before, .bubbly-button:after {
  position: absolute;
  content: "";
  display: block;
  width: 140%;
  height: 100%;
  left: -20%;
  z-index: -1000;
  transition: all ease-in-out 0.5s;
  background-repeat: no-repeat;
}
.bubbly-button:before {
  display: none;
  top: -75%;
  background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
.bubbly-button:after {
  display: none;
  bottom: -75%;
  background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.bubbly-button:active {
  transform: scale(0.9);
  background-color: #e60074;
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
.bubbly-button.animate:before {
  display: block;
  animation: topBubbles ease-in-out 0.75s forwards;
}
.bubbly-button.animate:after {
  display: block;
  animation: bottomBubbles ease-in-out 0.75s forwards;
}

@keyframes topBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
@keyframes bottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
  }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
</style>
</head>
<body>
  <button class="bubbly-button">Click me!</button>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
var animateButton = function (e) {

  e.preventDefault;
  //reset animation
  e.target.classList.remove('animate');

  e.target.classList.add('animate');
  setTimeout(function () {
    e.target.classList.remove('animate');
  }, 700);
};

var bubblyButtons = document.getElementsByClassName("bubbly-button");

for (var i = 0; i < bubblyButtons.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  bubblyButtons[i].addEventListener('click', animateButton, false);
}window.CP.exitedLoop(0);
//# sourceURL=pen.js
    </script>
</body>
</html>

14. By ayamflow

Made by ayamflow. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
body {
  background: #f1c40f;
}

.button {
  background: #3498db;
  width: 180px;
  padding: 4px 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 3px;
}
.button p {
  font-family: "Roboto";
  text-align: center;
  text-transform: uppercase;
  color: #FFF;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.button:hover {
  cursor: pointer;
}
.button:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 10%;
  border-radius: 50%;
  background-color: #927608;
  opacity: 0.4;
  bottom: -30px;
}
</style>
</head>
<body>
  <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Roboto:400"/>
<div class="button">
  <p>Click me</p>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/TweenMax.min.js'></script>
      <script>
var $button = document.querySelector('.button');
$button.addEventListener('click', function () {
  var duration = 0.3,
  delay = 0.08;
  TweenMax.to($button, duration, { scaleY: 1.6, ease: Expo.easeOut });
  TweenMax.to($button, duration, { scaleX: 1.2, scaleY: 1, ease: Back.easeOut, easeParams: [3], delay: delay });
  TweenMax.to($button, duration * 1.25, { scaleX: 1, scaleY: 1, ease: Back.easeOut, easeParams: [6], delay: delay * 3 });
});
    </script>
</body>
</html>

15. By Katherine Kato

Made by Katherine Kato. Face button made using JavaScript. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
 
<style>
* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  background: #fbf6e6;
}

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.25rem;
  height: 6.25rem;
}

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
}
button.face-button {
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
  background: #fdda5f;
  box-shadow: inset 2px -4px 18px #fd9744;
}

.face-container {
  position: relative;
  display: block;
  width: 40px;
  height: 20px;
  margin: auto;
}

.eye {
  position: absolute;
  height: 0.5rem;
  width: 0.5rem;
  background: #2a2927;
  border-radius: 50%;
  -webkit-animation: eyeBlink 3200ms linear infinite;
          animation: eyeBlink 3200ms linear infinite;
}
.eye.left {
  left: 0;
}
.eye.right {
  left: 2rem;
}

.mouth {
  position: absolute;
  top: 1.125rem;
  left: 0.8rem;
  width: 1rem;
  height: 0.125rem;
  background: #2a2927;
  border-radius: 0;
}

.eye, .mouth {
  box-shadow: inset 1px 2px 4px #121110;
}

.face-button:hover .mouth,
.face-button:active .mouth {
  left: 1rem;
  width: 0.5rem;
  height: 0.4rem;
  border-radius: 1rem 1rem 0.125rem 0.125rem;
}

.face-button:hover .eye,
.face-button:active .eye {
  height: 0.375rem;
  width: 0.375rem;
  box-shadow: 0 0 0 0.25rem #fff;
}

@-webkit-keyframes eyeBlink {
  0%, 30%, 36%, 100% {
    transform: scale(1);
  }
  32%, 34% {
    transform: scale(1, 0);
  }
}

@keyframes eyeBlink {
  0%, 30%, 36%, 100% {
    transform: scale(1);
  }
  32%, 34% {
    transform: scale(1, 0);
  }
}
</style>
</head>
<body>
  <div id="container">
  <button class="face-button">
    <span class="face-container">
      <span class="eye left"></span>
      <span class="eye right"></span>
      <span class="mouth"></span>
    </span>
  </button>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js'></script>
      <script>
const faceButton = document.querySelector('.face-button');
const faceContainer = document.querySelector('.face-container');
const containerCoords = document.querySelector('#container');
const mouseCoords = containerCoords.getBoundingClientRect();

faceButton.addEventListener('mousemove', function (e) {
  const mouseX = e.pageX - containerCoords.offsetLeft;
  const mouseY = e.pageY - containerCoords.offsetTop;

  TweenMax.to(faceButton, 0.3, {
    x: (mouseX - mouseCoords.width / 2) / mouseCoords.width * 50,
    y: (mouseY - mouseCoords.height / 2) / mouseCoords.width * 50,
    ease: Power4.easeOut });

});

faceButton.addEventListener('mousemove', function (e) {
  const mouseX = e.pageX - containerCoords.offsetLeft;
  const mouseY = e.pageY - containerCoords.offsetTop;

  TweenMax.to(faceContainer, 0.3, {
    x: (mouseX - mouseCoords.width / 2) / mouseCoords.width * 25,
    y: (mouseY - mouseCoords.height / 2) / mouseCoords.width * 25,
    ease: Power4.easeOut });

});

faceButton.addEventListener('mouseenter', function (e) {
  TweenMax.to(faceButton, 0.3, {
    scale: 0.975 });

});

faceButton.addEventListener('mouseleave', function (e) {
  TweenMax.to(faceButton, 0.3, {
    x: 0,
    y: 0,
    scale: 1 });


  TweenMax.to(faceContainer, 0.3, {
    x: 0,
    y: 0,
    scale: 1 });

});
    </script>
</body>
</html>

16. By Joost Kiens

Made by Joost Kiens. SVG Button with JavaScript hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
  
<style>
:root {
  --button-height: 60px;
}

html {
  box-sizing: border-box;
  height: 100%;
}

body {
  margin: 0;
  padding: 20px;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#ff9966, #ff5e62);
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Button {
  background: 4px solid white;
  border: none;
  display: inline-block;
  height: var(--button-height);
  overflow: hidden;
  padding: 0 40px;
  position: relative;
}

.Button,
svg {
  cursor: pointer;
  font-family: 'Roboto';
  font-size: 24px;
  text-transform: uppercase;
}
</style>
</head>
<body>
  <button class="Button js-button">
  Hover over me
</button>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js'></script>
      <script>
const btn = document.querySelector('.js-button');
const btnText = btn.textContent;
const width = btn.clientWidth;
const height = btn.clientHeight;
const svg = Snap(width, height);
const color1 = '#FFFFFF';
const gradient = 'L(0, 0, 300, 300)#0575E6-#021B79';
const maskOffset = btn.clientHeight;

const border = svg.
rect(0, 0, width, height).
attr({ 'fill': 'none', 'stroke': color1, 'stroke-width': 4, 'class': 'border' });

const mask = svg.
path(`M0,0 L${width + maskOffset},0 L${width},${height} L-${maskOffset}, ${height} Z`).
attr({ 'fill': 'white', 'stroke': 'white', 'class': 'mask', 'stroke-width': 0 }).
transform(`t-${width + maskOffset},0`);

const maskInvert = mask.
clone().
transform('t0,0');

const text = svg.
text(width / 2, height / 2, btnText).
attr({ 'text-anchor': 'middle', 'dominant-baseline': 'central', 'fill': color1 });

const button = svg.
group(text, border).
attr({ mask: maskInvert });

const textMasked = text.
clone().
attr({ 'fill': gradient });

const borderMasked = border.
clone().
attr({ 'stroke': gradient });

const masked = svg.
group(textMasked, borderMasked).
attr({ mask });

svg.hover(
() => {
  mask.attr('stroke-width', 4);
  mask.stop().animate({ transform: 't0,0' }, 500, mina.easein);
  maskInvert.stop().animate({ transform: `t${width + maskOffset},0` }, 500, mina.easein);
},
() => {
  mask.stop().animate({ transform: `t-${width + maskOffset},0` }, 350, mina.easeout, () => mask.attr('stroke-width', 0));
  maskInvert.stop().animate({ transform: 't0,0' }, 350, mina.easeout);
});


svg.click(() => btn.click());
btn.replaceWith(svg.node);
//# sourceURL=pen.js
    </script>
</body>
</html>

17. By Josetxu

Made by Josetxu. Self-destruct button made using JavaScript. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background-color: #151515;
}

.base {
	background: #cacaca;
	width: 20vmin;
	border-radius: 27vmin;
	box-shadow: 0 6vmin 0.15vmin 0vmin #777, 0 4vmin 0.15vmin 0vmin #777, 0 2vmin 0.15vmin 0vmin #777;
	padding: 0vmin 2vmin 2vmin 2vmin;
	z-index: 1;
	transform: rotateX(60deg) rotateZ(0deg);
	margin-top: -4.5vmin;
	height: 22vmin;
}

button#activate {
	background: #d60505;
	border: 0;
	width: 20vmin;
	height: 19vmin;
	border-radius: 100%;
	position: relative;
	cursor: pointer;
	outline: none;
	z-index: 2;
	box-shadow: 0 4vmin 0.15vmin 0vmin #af0000, 0 2vmin 0.15vmin 0vmin #af0000;
	top: -2.5vmin;
	border: 0.5vmin solid #af0000a1;
	transition: all 0.25s ease 0s;
}

button#activate:hover {
	box-shadow: 0 3vmin 0.15vmin 0vmin #af0000, 0 1vmin 0.15vmin 0vmin #af0000;
	top: -1.5vmin;
	transition: all 0.5s ease 0s;
}
button#activate:active, button#activate.pushed {
	box-shadow: 0 1vmin 0.15vmin 0vmin #af0000, 0 1vmin 0.15vmin 0vmin #af0000;
	top: 0.5vmin;
	transition: all 0.25s ease 0s;
}
button#activate.pushed {
	box-shadow: 0 0 20px 10px #ff3c3c, 0 0 100px 50px #ff2828;
	background: #ff0000;
	border-bottom: 3px solid #00000020;
}


.box {
	transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg);
	transform-origin: center top;
	transform-style: preserve-3d;
	width: 45vmin;
	position: absolute;
	z-index: 5;
	margin-top: 27vmin;
	transition: transform 1s ease 0s;
	cursor: pointer;
	height: 45vmin;
	margin-left: -32vmin;
}

.box.opened {
  transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 180deg);
}

.box div {
	position: absolute;
	width: 45vmin;
	height: 45vmin;
	background: #00bcd47d;
	opacity: 0.5;
	border: 3px solid #00a4b9;
	border-radius: 3px;
	box-sizing: border-box;
	box-shadow: 0 0 3px 0 #00bcd48a;
}

.box > div:nth-child(1) {
	opacity: 0;
}
.box > div:nth-child(2) {
	transform: rotateX(90deg) translate3d(0px, 5vmin, 5vmin);
	height: 10vmin;
}
.box > div:nth-child(3) {
	transform: rotateX(0deg) translate3d(0, 0, 10vmin);
}
.box > div:nth-child(4) {
	transform: rotateX(270deg) translate3d(0px, -5vmin, 40vmin);
	height: 10vmin;
}
.box > div:nth-child(5) {
	transform: rotateY(90deg) translate3d(-5vmin, 0, 40vmin);
	width: 10vmin;
}
.box > div:nth-child(6) {
	transform: rotateY(-90deg) translate3d(5vmin, 0vmin, 5vmin);
	width: 10vmin;
}




.grid {
	background:repeating-linear-gradient(150deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 49px, rgb(255 255 255 / 10%) 50px ,rgb(0 0 0 / 30%) 51px , rgba(255,255,255,0) 55px ), repeating-linear-gradient(30deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 49px, rgb(255 255 255 / 10%) 50px ,rgb(0 0 0 / 30%) 51px , rgba(255,255,255,0) 55px );
	position: fixed;
	width: 200vw;
	height: 150vh;
}


.warning {
	position: absolute;
	z-index: 0;
	width: 45vmin;
	height: 45vmin;
	background: repeating-linear-gradient(-45deg, black, black 3vmin, yellow 3vmin, yellow 6vmin);
	transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg);
	box-shadow: 0 0 0 3vmin #af0000;
}

.warning:before {
	content: "";
	width: 80%;
	height: 80%;
	background: linear-gradient(45deg, #000000 0%, #414141 74%);
	float: left;
	margin-top: 10%;
	margin-left: 10%;
	border: 1vmin solid yellow;
	border-radius: 1vmin;
	box-sizing: border-box;
}

.warning:after {
	content: "WARNING:\2009 DANGER";
	color: white;
	transform: rotate(90deg);
	float: left;
	background: #af0000;
	position: absolute;
	bottom: 18.5vmin;
	left: -35vmin;
	font-size: 5vmin;
	font-family: Arial, Helvetica, serif;
	width: 49vmin;
	text-align: center;
	padding: 1vmin;
	text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}





.hinges {
  position: absolute;
	z-index: 3;
	transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg);
}


.hinges:before, .hinges:after {
	content: "";
	background: #2b2b2b;
	width: 5vmin;
	height: 1.5vmin;
	position: absolute;
	margin-top: -24.5vmin;
	z-index: 5;
	border: 2px solid #00000010;
	border-radius: 5px 5px 0 0;
	box-sizing: border-box;
	margin-left: -16.25vmin;
}
.hinges:after {
  margin-left: 13.75vmin;
  margin-top: -24.5vmin;
}


.box > span:before, .box > span:after {
	content: "";
	width: 5vmin;
	height: 1.5vmin;
	background: #103e4480;
	position: absolute;
	margin-left: 6vmin;
	border-radius: 0 0 5px 5px;
}
.box > span:after  {
  margin-left: 36vmin;
}

.box > span {
  transform: rotateX(89deg) translate(0.3vmin, 0.3vmin);
  position: absolute;
}





.text {
	position: absolute;
	margin-top: 55vmin;
	color: white;
	font-family: Arial, Helvetica, serif;
	font-size: 5vmin;
	text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
	perspective-origin: left;
	background: #af0000;
	padding: 1vmin;
	transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg) translate(33.5vmin, -2vmin);
	text-align: center;
	width: 49vmin;
	
}

div#panel:before {
	content: "WARNING";
	top: 3vmin;
	position: relative;
	font-size: 10vmin;
	width: 100vw;
	left: 0;
	z-index: 6;
	text-shadow: 0 0 1px #fff, 0 0 3px #fff;
	border-bottom: 1vmin dotted #fff;
}

#panel {
	position: absolute;
	background: #ff0000d0;
	color: #ffffff;
	font-family: Arial, Helvetica, serif;
	width: 90vmin;
	box-sizing: border-box;
	font-size: 3.25vmin;
	padding: 1vmin 2vmin;
	height: 60vmin;
	box-shadow: 0 0 0 100vmin #ff000060, 0 0 0 5vmin #ff000060;
	z-index: 5;
	display: none;
	text-align: center;
	text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff;
	animation: warning-ligth 1s 0s infinite;
}
#panel.show {
	display: block !important;
}

#msg {
	margin-top: 5vmin;
	text-shadow: 0 0 2px #fff;
}

#time {
	font-size: 10vmin;
	background: #00000080;
	max-width: 35vmin;
	margin: 6vmin auto 5vmin !important;
	position: relative;
	border-radius: 0.25vmin;
	text-shadow: 0 0 3px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000;
	padding: 1vmin 0;
}

#time:before {
	content: "00:0";: 
}

#abort {
	background: #ffffffb8;
	color: #d30303;
	cursor: pointer;
	padding: 1vmin 2.75vmin;
	font-size: 6vmin;
	border-radius: 0.25vmin;
	font-weight: bold;
	animation: highlight 1s 0s infinite;
}

#abort:hover {
  background: #ffffff;
	box-shadow: 0 0 15px 5px #fff;
}




@keyframes highlight {
	50% { box-shadow: 0 0 15px 5px #fff;}
}








div#turn-off {
	position: fixed;
	background: #ffffff80;
	left: 0;
	width: 100vw;
	height: 0vh;
	z-index: 7;
}

div#turn-off:before, div#turn-off:after {
	content: "";
	position: fixed;
	left: 0;
	top: 0;
	height: 0vh;
	background: #000;
	width: 100vw;
	transition: height 0.5s ease 0s;
}
div#turn-off:after {
	top: inherit;
	bottom: 0;
}


div#turn-off.close {
	height: 100vh;
}

div#turn-off.close:before, div#turn-off.close:after {
	transition: height 0.1s ease 0.1s;
	height: 49.75vh;
}




#time.crono {
	background: #ffffffba;
	transition: background 0.5s ease 0s;
	color: #ff0000;
	text-shadow: 0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff;
}
#detonate {
	display: none;
	color: #fff;
	z-index: 5;
	font-size: 8vmin;
	font-family: Arial, Helvetica, serif;
	text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff;
}	
#detonate.show {
	display: block;
	animation: blink 0.25s 0s infinite;
}	

#abort.hide {
	display: none;
}


@keyframes blink {
	50% { opacity: 0;}
}








#closing {
	width: 100vw;
	height: 100vh;
	left: 0;
	position: absolute;
}

div#closing:before, div#closing:after {
	content: "";
	width: 50vw;
	height: 1.5vh;
	left: -50vw;
	top: 49vh;
	position: absolute;
	background: #000000;
	z-index: 7;
	transition: left 0.2s ease 0s;
}

div#closing:after {
	right: -50vw;
	transition: right 0.2s ease 0s;
	left: initial;
}


div#closing.close:before {
	left: 0;
	transition: left 0.2s ease 0.2s;
}


div#closing.close:after {
	right: 0;
	transition: right 0.2s ease 0.2s;
}



#restart {
	position: absolute;
	z-index: 8;
	display: none;
}
#reload {
	position: absolute;
	z-index: 8;
	width: 10vmin;
	height: 10vmin;
	border-radius: 100%;
	border: 0;
	margin-top: -5vmin;
	margin-left: -2.5vmin;
	opacity: 0;
	cursor: pointer;
	transform: rotate(0deg);
	transition: transform 0.5s ease 0s;
	outline: none;
}
#reload:hover {
	background: #ef0000;
	transform: rotate(360deg);
	transition: transform 0.5s ease 0s;
}
#restart.show { 
	display: block; 
}

#restart.show #reload {  
	animation: refresh 3.5s 0s 1; 
	opacity:1;
}


@keyframes refresh {
		0% { opacity: 0; }
	 50% { opacity: 0; }
	100% { opacity: 1; }
}


button#reload:before {
	content: "";
	width: 6vmin;
	height: 6vmin;
	position: absolute;
	left: 2vmin;
	top: 2vmin;
	border-radius: 100%;
	border: 1vmin solid #000;
	box-sizing: border-box;
	border-bottom-color: transparent;
}

button#reload:after {
	content: "";
	border: 1.25vmin solid transparent;
	border-top: 2vmin solid black;
	position: absolute;
	transform: rotate(40deg) translate(0.5vmin, 1.25vmin);
}





@keyframes warning-ligth {
	 0% { box-shadow: 0 0 0 100vmin #ff000060, 0 0 0 5vmin #ff000060; }
	50% { box-shadow: 0 0 0 100vmin #ff000020, 0 0 0 5vmin #ff000020; }
}



#mute {
    position: absolute;
    bottom: 1vmin;
    right: 1vmin;
    background: #8bc34a80;
    width: 6vmin;
    height: 6vmin;
    cursor: pointer;
    border: 0.5vmin solid #151515;
}
#mute.muted {
    background: #ff000080;
}

#mute:before {
    content: "";
    border: 0.75vmin solid transparent;
    height: 2vmin;
    border-right: 2vmin solid #151515;
    position: absolute;
    border-left-width: 0;
    top: 1.25vmin;
    right: 1.25vmin;
}
#mute:after {
    content: "";
    border: 0vmin solid transparent;
    height: 2vmin;
    border-right: 1.5vmin solid #151515;
    position: absolute;
    top: 2vmin;
    right: 3.5vmin;
}
</style>
</head>
<body>
  <div class="grid"></div>

<div class="warning"></div>

<div class="base">
	<button id="activate">
		<span></span>
	</button>
</div>

<div class="box opened" id="cover">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<span></span><span></span>
</div>

<div class="hinges"></div>

<div class="text">
	SELF-&thinsp;DESTRUCT
</div>

<div id="panel">
	<div id="msg">DEVICE SELF-DESTRUCTION </div>
	<div id="time">9</div>
	<span id="abort">ABORT</span>
	<span id="detonate">DETONATE</span>
</div>

<div id="turn-off"></div>
<div id="closing"></div>

<div id="restart"><button id="reload"></button></div>

<div id="mute"></div>

<audio id="alarm">
	<source src="https://josetxu.com/demos/sounds/self-destruct-count.mp3" type="audio/mpeg">
</audio>
      <script>
var theCount;
var alarm = document.getElementById("alarm");
var panel = document.getElementById("panel");
var turnOff = document.getElementById("turn-off");
var turnOffHor = document.getElementById("closing");
var detonate = document.getElementById("detonate");
alarm.volume = 0.25; //volume level

var time = document.getElementById("time");
function showCountDown() {
  time.innerText = time.innerText - 1;
  if (time.innerText == 0) {
    clearInterval(theCount);
    time.classList.add("crono");
    abort.classList.add("hide");
    detonate.classList.add("show");
    setTimeout(function () {
      turnOff.classList.add("close");
      turnOffHor.classList.add("close");
      reload.classList.add("show");
      alarm.pause();
    }, 1500);
  }
}

var cover = document.getElementById("cover");
cover.addEventListener("click", function () {
  if (this.className == "box") this.classList.add("opened");else
  this.classList.remove("opened");
});

var btn = document.getElementById("activate");
activate.addEventListener("click", function () {
  this.classList.add("pushed");
  alarm.load();
  alarm.currentTime = 10.1;
  alarm.play();
  setTimeout(function () {
    panel.classList.add("show");
    theCount = setInterval(showCountDown, 1000);
    alarm.load();
    alarm.play();
  }, 500);
});

var abort = document.getElementById("abort");
abort.addEventListener("click", function () {
  btn.classList.remove("pushed");
  panel.classList.remove("show");
  clearInterval(theCount);
  time.innerText = 9;
  alarm.pause();
  alarm.currentTime = 10;
  alarm.play();
});

var reload = document.getElementById("restart");
reload.addEventListener("click", function () {
  panel.classList.remove("show");
  turnOff.classList.remove("close");
  turnOffHor.classList.remove("close");
  abort.classList.remove("hide");
  detonate.classList.remove("show");
  cover.classList.remove("opened");
  btn.classList.remove("pushed");
  this.classList.remove("show");
  time.classList.remove("crono");
  time.innerText = 9;
});

setTimeout(function () {
  cover.classList.remove("opened");
}, 100);

var mute = document.getElementById("mute");
mute.addEventListener("click", function () {
  if (this.className == "muted") {
    alarm.muted = false;
    this.classList.remove("muted");
  } else {
    alarm.muted = true;
    this.classList.add("muted");
  }
});
    </script>
</body>
</html>

18. By Kris Ellery

Made by Kris Ellery. Button Ripple Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
<style>
*,
*:after,
*:before {
  box-sizing: border-box;
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  background: #434A54;
  font-family: "Open Sans", "Arial", sans-serif;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  padding: 50px 0;
}

/**
 * Object: Divider
 * --------------------------------------------------
 */
.o-divider {
  border: 0;
  margin: 20px;
  height: 1px;
  background: #656D78;
}

/**
 * Component: Button
 * --------------------------------------------------
 */
.c-button {
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  margin: 0;
  vertical-align: middle;
  overflow: visible;
  color: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 1px;
  background: transparent;
  border: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  box-shadow: 2px 2px 0 0 #383e46;
  transition: all 0.2s ease;
}
.c-button:hover, .c-button:focus {
  outline: 0;
  text-decoration: none;
}
.c-button:not(:disabled) {
  cursor: pointer;
}

/**
 * Mixin: Button Modifier
 * --------------------------------------------------
 */
/**
 * Component: Button
 * Modifier: Purple
 * --------------------------------------------------
 */
.c-button--purple {
  background: #967ADC;
  text-shadow: 2px 2px 0 #7652d1;
}
.c-button--purple:hover {
  background: #8666d7;
}

/**
 * Component: Button
 * Modifier: Blue
 * --------------------------------------------------
 */
.c-button--blue {
  background: #4A89DC;
  text-shadow: 2px 2px 0 #276ecc;
}
.c-button--blue:hover {
  background: #357bd8;
}

/**
 * Component: Button
 * Modifier: Red
 * --------------------------------------------------
 */
.c-button--red {
  background: #E9573F;
  text-shadow: 2px 2px 0 #dc3519;
}
.c-button--red:hover {
  background: #e64328;
}

/**
 * Utility: Ripple
 * --------------------------------------------------
 */
.c-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.c-ripple__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.c-ripple.is-active .c-ripple__circle {
  -webkit-animation: a-ripple 0.4s ease-in;
          animation: a-ripple 0.4s ease-in;
}

/**
 * Animation: Ripple
 * --------------------------------------------------
 */
@-webkit-keyframes a-ripple {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0;
  }
}
@keyframes a-ripple {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0;
  }
}
</style>
</head>
<body>
  <button class="c-button c-button--purple" type="button">
  <div class="c-ripple js-ripple">
    <span class="c-ripple__circle"></span>
  </div>
  Material Design Ripple Effect
</button>

<hr class="o-divider">

<button class="c-button c-button--blue" type="button">
  <div class="c-ripple js-ripple">
    <span class="c-ripple__circle"></span>
  </div>
  Short Button
</button>

<hr class="o-divider">

<button class="c-button c-button--red" type="button">
  <div class="c-ripple js-ripple">
    <span class="c-ripple__circle"></span>
  </div>
  Long Button to Stress-Test Ripple Animation
</button>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
;(function ($, window, document, undefined) {

  'use strict';

  var $ripple = $('.js-ripple');

  $ripple.on('click.ui.ripple', function (e) {

    var $this = $(this);
    var $offset = $this.parent().offset();
    var $circle = $this.find('.c-ripple__circle');

    var x = e.pageX - $offset.left;
    var y = e.pageY - $offset.top;

    $circle.css({
      top: y + 'px',
      left: x + 'px' });


    $this.addClass('is-active');

  });

  $ripple.on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function (e) {
    $(this).removeClass('is-active');
  });

})(jQuery, window, document);
    </script>
</body>
</html>