script(src="https://use.fontawesome.com/f769c1e01c.js")
button#btn 
  span.default-text
    |Download
  span.hover-text
    i.fa.fa-download(aria-hidden='true')
#show.content.hide
  h1 Thanks!
  p Downloading in progress...

@import "bourbon"
body
  margin: 0
  background-color: #3f51b5
  +transition(background 0.5s ease-out)
#btn
  background: transparent
  border: 2px solid #fff
  border-radius: 1em
  color: #fff
  font-size: 24px
  padding: 1em 2em
  position: absolute
  left: 50%
  top: 50%
  +transform(translate(-50%, -50%))
  +transition(all 0.4s ease-out)
.content
  color: #fff
  text-align: center
  position: absolute
  left: 50%
  top: calc(50% + 4em)
  +transform(translate(-50%, -50%))
  +transition(all 0.5s cubic-bezier(.83,-0.43,.21,1.42))
.hide
  opacity: 0
  top: calc(50% + 8em)
  cursor: default
.show
  opacity: 1
  top: calc(50% + 6em)
.on
  background-color: #1976d2
#btn:hover, #btn.active
  background: white
  color: #3f51b5
  outline: none
#btn:focus
  outline: none
.hover-text
  position: absolute
  top: 1em
  left: 3.75em
  transform: translateY(-3em)
  opacity: 0
.default-text
  display: block
  transform: translateX(0)
span
  transition: transform 1s cubic-bezier(.72,-0.61,.25,1.51)
#btn:hover, #btn.active
  .default-text
    transform: translateY(3em)
    opacity: 0
#btn:hover, #btn.active
  .hover-text
    transform: none
    opacity: 1

var download = {
  init: function(settings) {
    download.config = {
      element: $("#show"),
      btn: $("#btn")
    };
    $.extend(download.config, settings);
    download.start();
  },
  start: function() {
    download.config.btn.on("click", function() {
      download.toggleShowElement();
    });
  },
  elementIsHidden: function() {
    download.config.element.hasClass("hide");
  },
  toggleShowElement: function() {
    if (download.elementIsHidden) {
      download.config.element.toggleClass("show");
      $("body").toggleClass("on");
      download.config.btn.toggleClass("active");
    }
  }
};

$(document).ready(download.init);