A Pen by Terence Devine.

3D-Download-Button-w--Meter-Progress.markdown

3D Download Button w/ Meter Progress

Animated download button (icon uses one i element) with 3D transition download meter progress bar. Coded off of .sketch mockup file, attached:

https://docs.google.com/file/d/0B2_87exeIkPUaWhra2RacGx3MmM/edit?usp=sharing

A Pen by Terence Devine on CodePen.

License.

index.html

<h1>Click Me!</h1>
<div class="download-wrap">
  <div class="download">
    <a href="#" class="button-download">
      download
      <span class="icon-wrap">
        <i class="icon-download"></i>
      </span>
    </a>
    <div class="meter">
      <span class="meter-progress"></span>
    </div>
  </div>
</div>

<button id="reset">Reset</button>

script.js

var download = $('.download'),
    meter = $('.meter');

$('.button-download').on('click', function(e) {
  download.toggleClass('is-active');
  
  setTimeout(function() {
    meter.toggleClass('is-done');
  }, 4000);
  
  e.preventDefault();
});

$('#reset').on('click', function() {
  download.removeClass('is-active');
  meter.removeClass('is-done');
});

style.scss

@import "compass/css3";
// Colors

$gray: #232323;
$primary: #00B6E9;
$secondary: #C41564;

// Fonts

$sans: 'Source Sans Pro';

// Button Sizes

$btnH: 4rem;
$btnD: 4rem;
$btnW: 15rem;

// Initial Styles

*, :before, :after{ box-sizing: border-box; }
body{ background: $gray; font-family: $sans; text-align: center; }
h1{ font-weight: 200; color: rgba(white, 0.2); padding-top: 3rem; }

// Reset

#reset{
  background: transparent;
  border: solid 1px rgba(white, 0.2);
  margin-top: 3rem;
  padding: 0.5rem 1rem 0.66rem;
  color: rgba(white, 0.2);
  font: {
    size: 1.5rem;
    weight: 200;
  }
  text: {
    transform: lowercase;
  }
  transition: 0.15s linear all;
  &:hover{
    background: rgba(white, 0.2);
    color: $gray;
  }
}

// Base Button Styles

.button,
[class*='button-']{
  background: $primary;
  display: inline-block;
  padding: 1rem 2rem;
  color: $gray;
  font: 200 1.5rem $sans;
  text: {
    transform: lowercase;
    decoration: none;
    align: left;
  }
  transition: 0.5s linear all;
  
  &:hover{
    background: lighten($primary, 20%);
  }
}

// Download Button

.download-wrap{
	perspective: 80rem;
  perspective-origin: 50% 50% 0;
  width: $btnW; height: $btnH;
  margin: 0 auto;
}

.download{
  position: relative;
  width: $btnW; height: $btnH;
  transform-style: preserve-3d;
  transform-origin: 50% 50% 0;
  transform: rotateX(0deg);
  transition: 0.2s linear all;
  
  &.is-active{
    transform: rotateX(90deg) translateZ($btnH/2);
    
    .meter-progress{
      right: 0%;
    }
  }
}

.button-download,
.meter{
  position: relative;
  width: $btnW; height: $btnH;
  font: {
    size: 1.5rem;
    weight: 200;
  }
  line-height: $btnH;
  padding: 0 2rem;
  transform-origin: top center;
}

// Meter

.meter{
  background: $secondary;
  overflow: hidden;
  transform: rotateX(270deg);
  
  &:before,
  &:after{
    display: block;
    text-align: center;
    color: rgba(white, 0.5);
    
  }

  &:before{
    content: 'downloading...';
    animation: white-pulse 1s infinite alternate;
  }
      
  &:after{
    content: 'done!';
    display: none;
    color: #fff;
  }
      
  &.is-done{
    &:before{ display: none; }
    &:after{ display: block;}
  }
  
  .meter-progress{
    display: block;
    width: 100%;
    position: absolute;
    right: 100%; top: 0; bottom: 0;
    background-image: linear-gradient(-45deg,
        rgba(black, 0.15) 10%, rgba(black, 0.2) 10%,
        rgba(black, 0.2) 20%, rgba(black, 0.15) 20%,
        rgba(black, 0.15) 30%, rgba(black, 0.2) 30%,
        rgba(black, 0.2) 40%, rgba(black, 0.15) 40%,
        rgba(black, 0.15) 50%, rgba(black, 0.2) 50%,
        rgba(black, 0.2) 60%, rgba(black, 0.15) 60%,
        rgba(black, 0.15) 70%, rgba(black, 0.2) 70%,
        rgba(black, 0.2) 80%, rgba(black, 0.15) 80%,
        rgba(black, 0.15) 90%, rgba(black, 0.2) 90%,
        rgba(black, 0.2)
    );
    transition: 4s linear all;
  }
}

// Download Icon

.icon-wrap{
  position: absolute;
  right: 0.5rem; top: 0; bottom: 0;
  width: $btnH;
  padding-top: 1.66rem;
  background: rgba(black, 0.1);
}

.icon-download{
  position: relative;
  display: block;
  width: 2.5rem; height: 1rem;
  margin: auto;
  border: solid 0.5rem $gray;
  border-top: none;
  
  &:before,
  &:after{
    content: '';
    display: block;
    position: absolute;
    animation: icon-bounce .5s infinite alternate;
  }
  
  &:before{
    left: 0.5rem; top: -0.5rem;
    width: 0.5rem; height: 0.5rem;
    background: $gray;
  }
  
  &:after{
    left: 0.25rem; top: -0.125rem;
    width: 0; height: 0;
    border-left: solid 0.5rem transparent;
    border-right: solid 0.5rem transparent;
    border-top: solid 0.5rem $gray;
  }
}

// Animations

@keyframes icon-bounce {
  from {
    transform: translateY(-5px);
  }
  
  to {
    transform: translateY(0);
  }
}

@keyframes white-pulse {
  from {
    color: rgba(white, 0.2);
  }
  
  to {
    color: rgba(white, 0.5);
  }
}