Download Button

Developer
Rosh Jutherford
Size
4,308 Kb
Views
20,240
  1. Download Button Previews
  2. Download Button HTML Codes
  3. Download Button CSS Codes
  4. Download Button JS Codes

How do I make an download button?

Designed by Piotr Kwiatkowski on Dribbblehttp://dribbble.com/shots/1101461-Download-Button?list=users. What is a download button? How do you make a download button? This script and codes were developed by Rosh Jutherford on 04 September 2022, Sunday.

Download Button Previews
IQ Test

Download Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Download Button</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html{ background: rgb(230,233,238); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(230,233,238,1) 2%, rgba(192,198,208,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(2%,rgba(230,233,238,1)), color-stop(100%,rgba(192,198,208,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(230,233,238,1) 2%,rgba(192,198,208,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(230,233,238,1) 2%,rgba(192,198,208,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(230,233,238,1) 2%,rgba(192,198,208,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(230,233,238,1) 2%,rgba(192,198,208,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e9ee', endColorstr='#c0c6d0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ width:100%; height:100%;
}
.button{ width:200px; height:200px; position:relative; border-radius:100px; margin:100px auto; background: rgb(246,247,247); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,247,247,1) 0%, rgba(160,165,174,1) 98%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,247,247,1)), color-stop(98%,rgba(160,165,174,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,247,247,1) 0%,rgba(160,165,174,1) 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,247,247,1) 0%,rgba(160,165,174,1) 98%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,247,247,1) 0%,rgba(160,165,174,1) 98%); /* IE10+ */
background: linear-gradient(to bottom, rgba(246,247,247,1) 0%,rgba(160,165,174,1) 98%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f7f7', endColorstr='#a0a5ae',GradientType=0 ); /* IE6-9 */ border-top:2px solid #ffffff; box-shadow: 0 0 25px 1px rgba(0,0,0,0.2), 0 15px 25px 1px rgba(0,0,0,0.1), 0 30px 16px 0 rgba(0,0,0,0.15);
}
img:hover{ -webkit-filter:brightness(1.1);
}
.button:active{ box-shadow:0 15px 16px 0 rgba(0,0,0,0.15); transform:translateY(3px);
}
img{ position:absolute; width:51px; height:45px; left:-25.5px; margin-left:50%; top:-22.5px; margin-top:50%;
}
.button:before{ content:" "; position:absolute; width:122px; height:122px; border-radius:61px; background: rgb(209,212,217); /* Old browsers */
background: -moz-linear-gradient(top, rgba(209,212,217,1) 2%, rgba(209,212,220,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(209,212,217,1)), color-stop(100%,rgba(209,212,220,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(209,212,217,1) 2%,rgba(209,212,220,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(209,212,217,1) 2%,rgba(209,212,220,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(209,212,217,1) 2%,rgba(209,212,220,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(209,212,217,1) 2%,rgba(209,212,220,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d4d9', endColorstr='#d1d4dc',GradientType=0 ); /* IE6-9 */ top:-61px; margin-top:50%; left:-61px; margin-left:50%; border-bottom:2px solid #e5e7eb;
}
.button:after{ content:" "; width:240px; height:240px; border-radius:120px; position:absolute; top:-120px; margin-top:50%; left:-120px; margin-left:50%; background:#d4dae5; z-index:-1; border-bottom:2px solid #f6f7f7; box-shadow: inset 0 0 15px 1px #bcc1ca;
}
.button.invisible:after{ display:none;
}
.pie-loader { position:absolute; z-index:-1; width:240px; height:240px; border-radius:120px; top:-120px; margin-top:50%; left:-120px; margin-left:50%; border:solid 1px transparent; overflow:hidden;
}
.left, .right { position:absolute; width:240px; height:240px;
}
.left { left:-50%; background-position: 120px 0%;
}
.right { left:50%; background-position: -120px 0%;
}
.button:after{ z-index:-2;
}
.button.disabled{ transform:none; box-shadow: 0 0 25px 1px rgba(0,0,0,0.2), 0 15px 25px 1px rgba(0,0,0,0.1), 0 30px 16px 0 rgba(0,0,0,0.15);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="button invisible"> <img src="http://josh-ruther4d.com/wp-content/uploads/2013/06/download_button.png" alt="" /> <div class="pie-loader"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Download Button - Script Codes CSS Codes

html{ background: rgb(230,233,238); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(230,233,238,1) 2%, rgba(192,198,208,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(2%,rgba(230,233,238,1)), color-stop(100%,rgba(192,198,208,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(230,233,238,1) 2%,rgba(192,198,208,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(230,233,238,1) 2%,rgba(192,198,208,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(230,233,238,1) 2%,rgba(192,198,208,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(230,233,238,1) 2%,rgba(192,198,208,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e9ee', endColorstr='#c0c6d0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ width:100%; height:100%;
}
.button{ width:200px; height:200px; position:relative; border-radius:100px; margin:100px auto; background: rgb(246,247,247); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,247,247,1) 0%, rgba(160,165,174,1) 98%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,247,247,1)), color-stop(98%,rgba(160,165,174,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,247,247,1) 0%,rgba(160,165,174,1) 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,247,247,1) 0%,rgba(160,165,174,1) 98%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,247,247,1) 0%,rgba(160,165,174,1) 98%); /* IE10+ */
background: linear-gradient(to bottom, rgba(246,247,247,1) 0%,rgba(160,165,174,1) 98%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f7f7', endColorstr='#a0a5ae',GradientType=0 ); /* IE6-9 */ border-top:2px solid #ffffff; box-shadow: 0 0 25px 1px rgba(0,0,0,0.2), 0 15px 25px 1px rgba(0,0,0,0.1), 0 30px 16px 0 rgba(0,0,0,0.15);
}
img:hover{ -webkit-filter:brightness(1.1);
}
.button:active{ box-shadow:0 15px 16px 0 rgba(0,0,0,0.15); transform:translateY(3px);
}
img{ position:absolute; width:51px; height:45px; left:-25.5px; margin-left:50%; top:-22.5px; margin-top:50%;
}
.button:before{ content:" "; position:absolute; width:122px; height:122px; border-radius:61px; background: rgb(209,212,217); /* Old browsers */
background: -moz-linear-gradient(top, rgba(209,212,217,1) 2%, rgba(209,212,220,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(209,212,217,1)), color-stop(100%,rgba(209,212,220,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(209,212,217,1) 2%,rgba(209,212,220,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(209,212,217,1) 2%,rgba(209,212,220,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(209,212,217,1) 2%,rgba(209,212,220,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(209,212,217,1) 2%,rgba(209,212,220,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d4d9', endColorstr='#d1d4dc',GradientType=0 ); /* IE6-9 */ top:-61px; margin-top:50%; left:-61px; margin-left:50%; border-bottom:2px solid #e5e7eb;
}
.button:after{ content:" "; width:240px; height:240px; border-radius:120px; position:absolute; top:-120px; margin-top:50%; left:-120px; margin-left:50%; background:#d4dae5; z-index:-1; border-bottom:2px solid #f6f7f7; box-shadow: inset 0 0 15px 1px #bcc1ca;
}
.button.invisible:after{ display:none;
}
.pie-loader { position:absolute; z-index:-1; width:240px; height:240px; border-radius:120px; top:-120px; margin-top:50%; left:-120px; margin-left:50%; border:solid 1px transparent; overflow:hidden;
}
.left, .right { position:absolute; width:240px; height:240px;
}
.left { left:-50%; background-position: 120px 0%;
}
.right { left:50%; background-position: -120px 0%;
}
.button:after{ z-index:-2;
}
.button.disabled{ transform:none; box-shadow: 0 0 25px 1px rgba(0,0,0,0.2), 0 15px 25px 1px rgba(0,0,0,0.1), 0 30px 16px 0 rgba(0,0,0,0.15);
}

Download Button - Script Codes JS Codes

$(".button").one("click",function(){ $(".button").toggleClass("invisible");
var $loader = $('.pie-loader'), sts = [ $('<div>', { 'class': 'right' }).appendTo($loader)[0].style, $('<div>', { 'class': 'left' }).appendTo($loader)[0].style ]; i = 0, step = 4, colors = ['transparent', '#ecd292']; //2 valid CSS colors
(function loop() { sts[+(i > 180)].backgroundImage = 'linear-gradient('+ (i-90) +'deg, '+ colors[0] +' 50%, '+ colors[1] +' 50%)'; if (++i > 360) { i = 0; colors = ["#ecd292","#ecd292"]; $("img").css("opacity","0.3"); $('.button').addClass("disabled"); } setTimeout(loop, step);
}());
});
Download Button - Script Codes
Download Button - Script Codes
Home Page Home
Developer Rosh Jutherford
Username the_ruther4d
Uploaded September 04, 2022
Rating 4.5
Size 4,308 Kb
Views 20,240
Do you need developer help for Download Button?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rosh Jutherford (the_ruther4d) Script Codes
Name
Flat Logo by Henrik Dahlheim
Rubee
Parallax Canvas Gallery
IOS7 Icon
Flat Range Sliders
Beautiful Login Form
Game-Style Header
A Pen by Rosh Jutherford
Finn by Meg Robichaud
RvV 2
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!