When we surf the internet we see many images, audio, videos, GIF, Templates etc. We are attracted to them so much that it arises a temptation to keep it front of our each eyes but for that we can’t afford to waste huge internet data so to save we use this term as Download which is basically means to save it offline and watch that particular element whenever you want as per your time.
Download Button using HTML5, CSS3 & JavaScript
But have you ever wonder that How with the help of One Click the file saves in system? Don’t worry my job is to make things understandable and make you introduce with each every possible effects and properties which helps you to make a good Front-End Developer.
So Hey Coders Welcome back to Codewithrandom today I’ll be demonstrating how with just one click we can save our element in the system. I hope you have the idea of the project.
HTML Code for Download Button
<div id="page"></div>
<footer>
<div>
Based on <a href="https://dribbble.com/shots/2502485-Download-lll" target="_blank">Oleg Frolov</a> creation
</div>
</footer>In this HTML Code we have just designed a structure where we have linked an external link for creating Download Button and embeded a text named as creation. Lets style the page using CSS language.
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
CSS Code for Download Button
@import "compass";
@import "susy";
/*===============================
= GENERAL =
===============================*/
/*---------- FONTS ----------*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,greek);
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);
/*---------- VARIABLES ----------*/
$text_color: #1f2e3e;
$blue: #2196f3;
$orange: #ff5722;
$green: #8bc34a;
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-size: 100%;
color: $text_color;
position: absolute;
width: 100%;
height: 100%;
}
#page {
position: relative;
width: 100%;
height: 100%;
@include display-flex;
@include justify-content( center );
@include align-items( center );
background-color: $blue;
&.orange {
background-color: $orange;
}
.material_button {
position: relative;
cursor: pointer;
width: 64px;
height: 64px;
line-height: 64px;
text-align: center;
&:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
@include border-radius( 50% );
position: absolute;
@include box-shadow( 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15) );
opacity: 0;
@include transition( opacity 0.25s ease-out );
}
&:hover {
&:before {
opacity: 1;
}
}
i {
position: relative;
height: 64px;
width: 64px;
line-height: 64px;
position: relative;
z-index: 99;
&.done {
opacity: 0;
visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
svg {
position: absolute;
top: 50%;
left: 50%;
@include transform( translate3d(-50%,-50%,0) );
z-index: 0;
overflow: visible;
circle {
fill: #fff;
&#green_ripple {
fill: $green;
}
}
}
.progress {
font-family: 'Roboto Mono', sans-serif;
opacity: 0;
visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
z-index: 9;
}
}
}
footer {
position: absolute;
width: 100%;
left:0;
bottom:0;
text-align:center;
padding: 16px 0;
color: #FFFFFF;
font-size: 14px;
a {
color: #1e59af;
}
}In this CSS script we have coded it in an intermediate format and used some high-level syntax to make our download button awesome. As we all know that when the word download strikes we all know that the word ‘progress’ is always present because it indicates that how much is the progress at a certain time. And rest is the alignment for it because we have to set and define position so that things are sorted and doesn’t get messy.
JavaScript Code for Download Button
/*=================================
= FUNCTIONS =
=================================*/
// window size function
function wndsize() {
var w = 0;
var h = 0;
//IE
if (!window.innerWidth) {
if (!(document.documentElement.clientWidth == 0)) {
//strict mode
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
} else {
//quirks mode
w = document.body.clientWidth;
h = document.body.clientHeight;
}
} else {
//w3c
w = window.innerWidth;
h = window.innerHeight;
}
return {
width: w,
height: h
};
}
// map function
Number.prototype.map = function ( in_min , in_max , out_min , out_max ) {
return ( this - in_min ) * ( out_max - out_min ) / ( in_max - in_min ) + out_min;
}
/*=================================
= VARIABLES =
=================================*/
var doc = document,
page = doc.getElementById('page'),
timeAnim = 1.25;
/*========================================
= REACT COMPONENTS =
========================================*/
var Ripple = React.createClass({
getInitialState: function() {
return {
x:"",
y: "",
w: wndsize().width,
h: wndsize().height
}
},
rippleAnim: function(event) {
var dom = this.refs.ripple.getDOMNode(),
greenDom = this.refs.greenripple.getDOMNode(),
tl = new TimelineMax(),
offsetX = Math.abs( (this.state.w / 2) - event.pageX ),
offsetY = Math.abs( (this.state.h / 2) - event.pageY ),
deltaX = (this.state.w / 2) + offsetX,
deltaY = (this.state.h / 2) + offsetY,
scale_ratio = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
TweenMax.set([dom, greenDom], {transformOrigin: "center center"});
tl
.to(dom, timeAnim, {
attr: {
r: scale_ratio
},
ease: Power3.easeOut,
onComplete: function() {
classie.add(page, "orange");
}
})
.to(dom, 2*timeAnim, {
attr: {
r: 32
},
delay: timeAnim/3,
ease: Power0.easeNone
})
.to(greenDom, timeAnim/2, {
attr: {
r: scale_ratio
},
delay: timeAnim/3,
ease: Power3.easeOut
});
},
componentWillReceiveProps: function(nextProps) {
if (nextProps.activity === "play") {
switch(nextProps.point) {
case "one":
this.setState({
x: nextProps.event.pageX,
y: nextProps.event.pageY
});
this.rippleAnim(nextProps.event);
break;
case "two":
var dom = this.refs.ripple.getDOMNode(),
greenDom = this.refs.greenripple.getDOMNode(),
tl = new TimelineMax(),
offsetX = Math.abs( (this.state.w / 2) - this.state.x ),
offsetY = Math.abs( (this.state.h / 2) - this.state.y ),
deltaX = (this.state.w / 2) + offsetX,
deltaY = (this.state.h / 2) + offsetY,
scale_ratio = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
tl
.to(dom, timeAnim, {
attr: {
r: scale_ratio
},
onComplete: function() {
classie.remove(page, "orange");
TweenMax.set(greenDom, {
attr: {
r: 32
}
});
},
ease: Power3.easeOut
})
.to(dom, timeAnim/2, {
attr: {
r: 32
},
ease: Power3.easeOut
});
break;
}
}
},
render: function() {
return (
<svg height="1" width="1">
<circle ref="greenripple" id="green_ripple" cx="0" cy="0" r="32" />
<circle ref="ripple" id="white_ripple" cx="0" cy="0" r="32" />
</svg>
);
}
});
var Button = React.createClass({
handleClick: function(e) {
var self = this;
if (this.state.action === "paused") {
this.setState({
action: "play",
point: "one",
progress: 0,
event: e.nativeEvent
});
var arrow = this.refs.arrow_icon.getDOMNode(),
done = this.refs.done_icon.getDOMNode(),
progress = this.refs.progress.getDOMNode(),
tl = new TimelineMax();
tl.fromTo(arrow, timeAnim, {
yPercent: 0,
autoAlpha: 1,
scale: 1
},{
yPercent: 20,
autoAlpha: 0,
//delay: timeAnim/3,
ease: Power3.easeOut
})
.fromTo(progress, 2*timeAnim/3, {
yPercent: -20,
autoAlpha: 0,
scale: 0.6
},{
yPercent: 0,
autoAlpha: 1,
scale: 1,
ease: Power3.easeOut
}, "-="+timeAnim/3)
.to(self.state, 2*timeAnim, {
progress: 100,
ease: Power0.easeNone,
onUpdate: function(tween) {
self.setState({
progress: parseInt(tween.target.progress),
action: "paused"
})
},
onUpdateParams:["{self}"]
})
.to(progress, timeAnim/4, {
yPercent: 20,
autoAlpha: 0,
scale: 0.6,
delay: timeAnim/3,
ease: Power3.easeOut
})
.fromTo(done, timeAnim/4, {
yPercent: -20,
autoAlpha: 0,
scale: 0.6
},{
yPercent: 0,
autoAlpha: 1,
scale: 1,
ease: Power3.easeOut
})
.to(done, 2*timeAnim/3, {
yPercent: 20,
autoAlpha: 0,
scale: 0.6,
delay: timeAnim/3,
onStart: function() {
self.setState({
action: "play",
point: "two",
progress: 0,
event: ""
});
},
ease: Power3.easeOut
})
.fromTo(arrow, 2*timeAnim/3, {
yPercent: -20,
scale: 0.6,
autoAlpha: 0
},{
yPercent: 0,
scale: 1,
autoAlpha: 1,
delay: timeAnim/2,
ease: Power3.easeOut,
onComplete: function() {
self.setState({
action: "paused",
point: "one",
progress: 0,
event: ""
});
}
});
}
},
getInitialState: function() {
return {
action: "paused",
point:"",
progress: 0,
event: ""
}
},
render: function() {
return (
<div className="material_button" onClick={this.handleClick}>
<i ref="done_icon" className="material-icons done">done</i>
<div ref="progress" className="progress">{this.state.progress}</div>
<i ref="arrow_icon" className="material-icons">arrow_downward</i>
<Ripple activity={this.state.action} event={this.state.event} point={this.state.point} />
</div>
);
}
});
React.render(
<Button />,
page
);
Well Well Well Coders I know that this not the same JavaScript where we used to defined the document.getelementbyid and later call it and set some constraints. But as I said this project is basically for Intermediater in Front End Development So here we have defined REACT syntax which is an upper level of JavaScript. In which the attributes & elements are rendered time to tome while onClicking. Let us see the output
Final Output Download Button using HTML5, CSS3 & JS
We have Successfully created our Download Button using HTML5, CSS3 & JS | JavaScript Download File From URL. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned below.
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Written By – Harsh Sawant
Code Idea by – CODEARMADA
