<div class="flipper-container">
<a class="flipper" href="https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73751/world.topo.bathy.200407.3x21600x10800.jpg" title="25 MB.jpg" onclickk="downloadFile('https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73751/world.topo.bathy.200407.3x21600x10800.jpg','25MB1.jpg',this);">
<div id="download" class="front-face" data-icon="▼
"><span>Download audio <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 960 960" enable-background="new 0 0 960 960" xml:space="preserve">
<g>
<g>
<path fill="#FFFFFF" d="M559.175,109.163c-66.309,0-131.232,17.616-188.041,51.068c-50.672,29.889-93.625,71.456-125.097,120.94
H104.313C46.713,281.171,0,327.885,0,385.484v189.031c0,57.6,46.713,104.313,104.313,104.313h141.724
c31.472,49.484,74.425,91.052,125.097,120.94c56.809,33.451,121.732,51.067,188.041,51.067c14.846,0,26.722-11.876,26.722-26.722
v-688.23C585.896,121.237,574.021,109.163,559.175,109.163z M234.359,625.386H104.313c-28.107,0-50.87-22.763-50.87-50.87V385.484
c0-28.107,22.763-50.87,50.87-50.87h130.045V625.386z M532.453,796.404c-100.354-8.512-191.802-64.924-244.651-151.621V315.415
c52.849-86.697,144.296-143.109,244.651-151.621V796.404z"/>
<path fill="#FFFFFF" d="M690.606,273.056c-12.074-8.511-28.701-5.542-37.213,6.73c-8.511,12.074-5.542,28.701,6.73,37.212
c53.443,37.212,85.312,98.375,85.312,163.299s-31.868,126.087-85.312,163.299c-12.074,8.512-15.044,25.139-6.73,37.213
c5.146,7.521,13.46,11.48,21.972,11.48c5.344,0,10.688-1.584,15.241-4.751c67.694-47.308,108.272-124.701,108.272-207.043
C798.879,398.152,758.301,320.165,690.606,273.056z"/>
<path fill="#FFFFFF" d="M793.93,162.408c-12.074-8.511-28.701-5.542-37.212,6.73c-8.512,12.074-5.542,28.701,6.729,37.212
c89.666,62.548,143.109,164.882,143.109,273.748c0,108.866-53.443,211.398-143.109,273.749
c-12.074,8.511-15.043,25.138-6.729,37.212c5.146,7.521,13.46,11.48,21.971,11.48c5.345,0,10.688-1.583,15.241-4.75
C897.848,725.345,960,606.581,960,480.099S898.045,234.854,793.93,162.408z"/>
</g>
</g>
</svg></span></div>
</a>
</div>@import "compass/css3";
// Variables
$dark: #282828;
$pink: #fc2161;
$pink-d: darken($pink, 15%);
$green: #77BD42;
$green-d: darken($green, 15%);
// Fonts
@import url(https://fonts.googleapis.com/css?family=Montserrat:400);
// Get to business
body {
background-color: #24282e;
/*background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAU0lEQVQIHQXBwRGDIBAAwO2/AMcCDHAcPjIRxjJ8Je1kl1uqUgphsWu6w0sIG6npLpcUBql4e/wsVRKabrkNTacIYbMrwsF06rqUhsnXVKVT+Hj+Ue4rPSONk4kAAAAASUVORK5CYII=);*/
padding-top: 80px;
text-align: center;
}
.flipper-container {
text-align: center;
margin-top: 40px;
@include perspective(1000);
}
.flipper {
display: inline-block;
position: relative;
text-decoration: none;
font-family: 'Montserrat', arial, sans-serif;
font-weight: 400;
text-transform: uppercase;
width: 20em; height: 4.5em;
background-color: $dark;
box-shadow: 0 3px 5px $dark;
cursor: pointer;
}
#download {
overflow: hidden;
}
.front-face, .back-face {
position: absolute;
z-index: 10;
width: 100%; height: 100%;
top: 0; left: 0;
padding-right: 70px;
letter-spacing: 2px;
line-height: 4.5em;
@include border-radius(2px);
@include backface-visibility(hidden);
&:before {
content: attr(data-icon);
font-size: 30px;
position: absolute;
z-index: -20;
top: 0; right: 0;
height: 100%; width: 70px;
border-radius: 0 2px 2px 0;
}
&:after {
content: '';
background-color: $green;
height: 100%;
width: 0;
position: absolute;
z-index: -10;
left: 0;
}
}
.front-face {
background-color: $pink;
color: #fff;
text-shadow: 0 1px 1px darken($pink, 20%);
span svg{
position: absolute;
top: 18px;
right: 90px;
}
&:before {
@include background-image(linear-gradient(45deg, $pink-d 0%, #eb1f56 50%, #f91858 50%, $pink));
}
}
.back-face {
background-color: $green;
color: $green-d;
&:before {
@include background-image(linear-gradient(45deg, $green-d 0%, #76bc42 50%, #7dbd4c 50%, $green));
content: '\2713';
}
}$( ".flipper" ).on( "click", function( event ) {
event.preventDefault()
var href = $( this ).attr("href");
var name = $( this ).attr("title");
downloadFile(href, name);
});
function updateDLProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = (evt.loaded / evt.total) * 100;
if (evt.loaded < evt.total) {
$('#download span').text("DOWNLOADING... " + Math.round(percentComplete) + "%");
$('<style>.front-face::after{width:'+Math.round(percentComplete)+'%}</style>').appendTo('body');
} else {
$('#download span').text("DOWNLOAD COMPLETE");
$('#download').attr("class", "back-face");
}
} else {
$('#download span').text("Downloading... " + evt.total + "%");
}
}
function downloadFile(urlToSend, fileName) {
$('#download span').text("WORKING...");
var req = new XMLHttpRequest();
req.open("GET", "https://cors-anywhere.herokuapp.com/" + urlToSend, true);
//req.open("GET", urlToSend, true);
req.setRequestHeader("Cache-Control", "no-cache");
req.onprogress = updateDLProgress;
req.responseType = "blob";
req.onload = function(event) {
var blob = req.response;
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
document.body.appendChild(link);
link.click();
link.remove()
};
req.send();
}
// https://jsfiddle.net/0y1ozthj/7/ new work
External CSS
This Pen doesn't use any external CSS resources.