<svg viewBox="0 0 144 144">
  <a class="button js-button" xlink:href="https://codepen.io/tylersticka/share/zip/68f83e98edfea298f173b9573fcce808/" target="_blank">
    <polygon class="js-button-shape" points="144,72 144,48 0,48 0,72 0,96 72,96 144,96" data-to="90,76 90,24 54,24 54,76 24,76 72,124 120,76"/>
    <g class="js-button-text">
      <text x="72" y="72" text-anchor="middle" dominant-baseline="central" class="button-text">
        Download
      </text>
    </g>
    <rect x="0" y="0" width="144" height="144" fill-opacity="0"/>
  </a>
</svg>
.button {
  cursor: pointer;
  fill: #456bd9;
  transition: fill 300ms ease;
}

.button:hover,
.button:focus {
  fill: #5A7BDD;
}

.button-text {
  fill: #ffffff;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
  font-weight: 600;
}

/* Demo scaffolding stuff */

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  width: 50%;
  max-width: 288px;
}
// Select the elements we'll be using
var button = document.querySelector('.js-button');
var buttonShape = button.querySelector('.js-button-shape');
var buttonText = button.querySelector('.js-button-text');

// Store the "to" and "from" states of button shape
var shapeFrom = buttonShape.getAttribute('points');
var shapeTo = buttonShape.getAttribute('data-to');

// Common animation properties
var duration = 0.3;
TweenLite.defaultEase = Cubic.easeInOut;

// Create our animation timeline
var timeline = new TimelineMax({ 
  paused: true // Do not start playing right away
});

// Add our tweens (both happening at the same time)
timeline.add([
  // Morph the button shape
  TweenMax.to(buttonShape, duration, {
    attr: { points: shapeTo }
  }),
  // Scale the text
  TweenMax.to(buttonText, duration, {
    scale: 0,
    transformOrigin: '50% 50%'
  })
]);

// Control the animations based on events
button.addEventListener('mouseenter', function(){
  timeline.play();
});
button.addEventListener('mouseleave', function(){
  timeline.reverse();
});

External CSS

  1. https://fonts.googleapis.com/css?family=Source+Sans+Pro:600

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js