<div class='button-ctr'>
  <svg width="59px" height="42px" viewBox="0 0 59 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
    <title>Check</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <path d="M4.5,20.5 L21.0302753,37.0302753 L54.5,4.5" id="line" stroke="#fff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" sketch:type="MSShapeGroup"></path>
    </g>
  </svg>
  <div class='ripple'></div>
  <p class="wait">Please Wait...</p>
  <button>
    <span>DOWNLOAD</span>
  </button>
</div>
@import "bourbon";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);

html {
  height: 100%;
}

body {
  background: #C644FC;
  height: 100%;
  font-size: 16px; 
} 

%center {
  @include position(absolute, 50% x x 50%);
  @include transform(translate(-50%, -50%));
}

%centerB {
  @include position(absolute, x x 50% 50%);
  @include transform(translate(-50%, 50%));
}

.button-ctr {
  @extend %center;
  background: transparent;
  height: 300px;
  width: 450px;
  overflow: hidden;
  
  p {
    text-align: center;
    color: #777;
    font-size: 1.25rem;
    font-family: "Roboto";
    letter-spacing: 1px;
    @extend %center;
  }
  
  svg {
    @extend %center;
    z-index: 99;
    pointer-events: none;
  }
  
  button {
    @extend %centerB;
    border: none;
    background: #9b59b6;
    color: white;
    padding: 20px 40px;
    font-size: 1rem;
    font-weight: 300;
    font-family: "Roboto";
    letter-spacing: 1.5px;
    cursor: pointer;
    overflow: hidden;
    
    &:focus {
      outline: none; 
    }
    
    &.notactive {
      pointer-events: none;
    } 
  }
  
  .ripple {
    @extend %center;
    width: 450px;
    height: 300px;
    background: white;
  }
}
var buttonCtr = $(".button-ctr"),
    prg = $(".wait"),
    svg = $("svg"),
    ripple = $(".ripple"),
    button = $("button"),
    text = $("button span"),
    line = $("#line");

TweenMax.set(svg, {
  scale:1.5
});

TweenMax.set(ripple, {
  scale: .05,
  alpha: 0,
  transformOrigin: "50% 50%"
});

TweenMax.set(line, {
  drawSVG: "0% 0%"
});



var splitText = new SplitText(prg, {type:"chars"}),
    chars = $("p > div");

TweenMax.set(chars, {
  alpha: 0,
  y: "-30px",
  rotation: "45deg"
});

button.on("click", function(){

  var tl = new TimelineMax({
    onComplete : done
  });

  tl.to(ripple, .3, {
    scale: 1,
    alpha: 1
  })
  .to(text, .5, {
    alpha: 0
  }, 0)
  .set(button, {
    className: "+=notactive"
  })
  .to(button, .3, {
    width: "20px",
    height: "20px",
    padding: 0,
    left: "0%",
    bottom: "0%",
  })
  .to(button, 2, {
    width: "210%"
  })
  .staggerTo(chars, 1, {
    y: "0", 
    rotation: "0deg",
    alpha: 1,
    ease:Elastic.easeOut,
    delay: 1
  }, 0.1, 0)
  .to(button, .3, {
    height: "200%",
    alpha: 1
  })
  .to(line, .3, {
    drawSVG: "0% 100%",
    delay: .15,
  })
  tl.to([buttonCtr, ripple, button, text, line], .15, {
    alpha: 0,
    delay: .5
  })

  function done() {
    tl.pause(0)
  }

});

// copy
balapaCop("Download Progres Interaction", "rgba(255,255,255,.8)");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js
  3. //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12
  4. //www.greensock.com/js/src/utils/SplitText.min.js
  5. https://codepen.io/balapa/pen/c58fffe58d661ae3d4b168a43eb3b2b8.js