<a herf="#" class="button button-dl" role="button" data-file="1.2MB .zip">
  <span>Download</span>
</a>
*,
*::after,
*::before {
  box-sizing: border-box;
  line-height: 1em;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
body {
  background: {
    image: linear-gradient(90deg, #f2994a, #f2c94c);
    position: center;
    repeat: no-repeat;
    size: cover;
  }
  color: #ffffff;
  font: {
    family: "Raleway", sans-serif;
    size: 16px;
    weight: 400;
  }
  position: relative;
  text: {
    align: center;
  }
}

.button {
  background: {
    color: transparent;
  }
  border: {
    radius: 2px;
  }
  bottom: auto;
  cursor: pointer;
  display: inline-block;
  left: 50%;
  margin: auto;
  position: absolute;
  right: auto;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  &::after,
  &::before {
    background: {
      color: #000000;
    }
    border: {
      radius: inherit;
    }
    content: "";
    display: block;
    font: {
      size: 10px;
    }
    left: 6px;
    padding: 6px;
    position: absolute;
    rigth: 6px;
    transition: all 0.2s linear;
    width: calc(100% - 12px);
    z-index: -1;
  }
  &::after {
    border: {
      top-left-radius: 0;
      top-right-radius: 0;
    }
    bottom: 0;
    content: attr(data-file);
    top: auto;
  }
  &::before {
    border: {
      bottom-right-radius: 0;
      bottom-left-radius: 0;
    }
    bottom: auto;
    content: "click to begin";
    top: 0;
  }

  &:hover {
    &::after {
      transform: translate3d(0, 100%, 0);
    }
    &::before {
      transform: translate3d(0, -100%, 0);
    }
  }

  span {
    background: {
      image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.1) 50%,
        transparent 50%,
        transparent
      );
      color: #bd3f32;
    }
    border: {
      radius: inherit;
    }
    display: block;
    font: {
      family: "Dancing Script", cursive;
      weight: 700;
    }
    overflow: hidden;
    padding: 10px 20px;
  }
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Dancing+Script:700|Raleway&amp;subset=latin-ext

External JavaScript

This Pen doesn't use any external JavaScript resources.