35+ CSS Download Buttons - Free Code + Demos
Collection of 35+ CSS Download Buttons. All items are 100% free and open-source.
1. Cloud Download Animation
Based on the App Store cloud download icon but animated. The idea is to show spinning water droplets on preload then turn the down arrow into a progress bar after falling. When the download is completed, a checkmark pops out of the cloud.
Author: Jon Kantner (jkantner)
Links: Source Code / Demo
Created on: June 20, 2018
Made with: HTML, SCSS, JS
Tags: cloud, download, preload, loading
2. #codevember 06-2016 <Download Button>
I really like playing with buttons. This time I went with a simple download button with a loading and success state. This would work well for downloads or submitting forms. Icons from FontAwesome.
Author: James Fleeting (fleeting)
Links: Source Code / Demo
Created on: November 6, 2016
Made with: HTML, PostCSS, Babel
Tags: codevember, css, button, animate, interface
3. Downloading Animation
Author: Dany Santos (THEORLAN2)
Links: Source Code / Demo, Www.uplabs.com
Created on: September 19, 2016
Made with: HTML, CSS, JS
Tags: css, js, downloading, download, animation
4. CSS Fizzy Button
Yeah i like buttons me...
Author: Jamie Coulter (jcoulterdesign)
Links: Source Code / Demo
Created on: April 22, 2016
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Haml
Tags: button, css, ui, ux, animation
5. Download Buttons
Download buttons from three different stores.
Author: Krystian Rysnik (chrisR_)
Links: Source Code / Demo
Created on: April 8, 2016
Made with: HTML, CSS, JS
Tags: download, button, windows, google, apple
6. Download Animation - CSS Only
My goal was to get as close to the original animation as I could with only using css transitions and animations. Could it be better? Please let me know! : ) This is a download animation that was inspired by Nick's post on MaterialUp http://www.materialup.com/posts/download-animation
Author: Matthew Sechrest (codemonkeyco)
Links: Source Code / Demo, Www.materialup.com
Created on: April 2, 2016
Made with: HTML, CSS
Tags: download, animation, css-only, transition, materialup
7. Pure Css Download Button
Download button with progress bar and user feedback
Author: Rune Sejer Hoffmann (RSH87)
Links: Source Code / Demo
Created on: March 15, 2016
Made with: HTML, SCSS, JS
Tags: download, button, purecss, ux, ui
8. App Download Button Concept
That's a simple concept for download an app to your computer
Author: Álvaro Hernández Perales (Varo)
Links: Source Code / Demo
Created on: March 9, 2016
Made with: HTML, SCSS, JS
Tags: button, css, animation, progress, ui
9. Download Upload Button
Download Upload Material Button in Pure Css
Author: Vineeth.TR (vineethtr)
Links: Source Code / Demo
Created on: July 21, 2015
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: download, upload, material, button
10. Download Buttom
Author: jesus tapial (machuenca)
Links: Source Code / Demo
Created on: April 23, 2015
Made with: HTML, SCSS, JS
11. Download Button With Micro Interactions
Links: Source Code / Demo
12. Download Button
Author: ActiveCodex (ActiveCodex)
Links: Source Code / Demo, Dribbble.com
Created on: February 27, 2015
Made with: HTML, CSS
Tags: dribbble, button
13. Button With Sliding Information
The button shows you more information when you hover it.
Author: Miro Karilahti (miroot)
Links: Source Code / Demo
Created on: November 6, 2014
Made with: HTML, SCSS
Tags: button, animation, flat, css3, pure-css
14. CSS3 Active Download Button
Active blue download button with gradient and with icon created by using only CSS, except icon. Enjoy!
Author: Arthur Gareginyan (berserkr)
Links: Source Code / Demo
Created on: August 15, 2014
Made with: HTML, CSS
Tags: button, css, css3, gradient, download
15. Download Button
Author: Tin Fung, Chan (tin-fung-hk)
Links: Source Code / Demo
Created on: July 30, 2020
Made with: HTML, CSS, JS
Tags: button, download, progress, animation
16. Pure CSS Animated Download Button
Button with animated (on hover) download icon, without any additional HTML markup or images.
Author: Nate Watson (nw)
Links: Source Code / Demo
Created on: May 30, 2014
Made with: HTML, CSS
Tags: button, animation, flat, pure-css, css3
17. Animated CSS3 Buttons
Author: creotip (creotip)
Links: Source Code / Demo
Created on: May 1, 2014
Made with: HTML, CSS
Tags: animated-buttons, buttons
18. Better Discord - Download Button In CSS
Author: Beard Design (Beard-Design)
Links: Source Code / Demo
Created on: July 20, 2016
Made with: HTML, CSS
19. App Download Widget
Author: Olsi Odobashi (olsiodobashi)
Links: Source Code / Demo
Created on: June 3, 2016
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: app, download, widget, flat
20. Download Button
Simple download button (icon from font awesome)
Author: Cristina Niculescu (N-Cristina)
Links: Source Code / Demo
Created on: June 2, 2020
Made with: HTML, CSS
Tags: download, download icon, download-button, button, download link
21. Bootstrap 4 Play Store Application Download Button With Font Awesome Icons
Links: Source Code / Demo
22. Download Button With Progress
Author: dsp studio (dspstudio)
Links: Source Code / Demo
Created on: February 14, 2019
Made with: HTML, SCSS, JS
Tags: button, download, progress
23. Stunning Animated CSS3 Download Button
By Faizan Asad
Author: Faizan Asad (faizanasad)
Links: Source Code / Demo
Created on: May 14, 2014
Made with: HTML, CSS
24. Download Button In Blogger Or Blogspot.com
Download button or demo button in blogger made my https://tech-onlinehelp.blogspot.com www.techonlinehelp.wordpress.com
Author: JASSI JASS (Jassijass)
Links: Source Code / Demo
Created on: March 15, 2020
Made with: HTML, CSS
Tags: download, button, download-button, blogger, blog
25. Css & Html Download Button!
This Button is beaiuty and plan. you can develop higher than with your idea!
Author: Sina Majidi (sinamajidi)
Links: Source Code / Demo
Created on: January 18, 2020
Made with: HTML, CSS
Tags: button, dl, download, download-button
26. Download Movie
Demonstrates how to best describe a download link.
Author: Eric Bailey (ericwbailey)
Links: Source Code / Demo
Created on: December 25, 2017
Made with: HTML, SCSS
Tags: download, embedded, css-tricks
27. Download Icons
Icons from the Noun Project: - Book, by mikicon: https://thenounproject.com/icon/1061355/ - Books, by Gonzalo Bravo: https://thenounproject.com/icon/836336/ - Cube, by Andrey: https://thenounproject.com/icon/1435586/ - Download, by Numero Uno: https://thenounproject.com/icon/1012679/ - Pod...Read More
Author: Eric Bailey (ericwbailey)
Links: Source Code / Demo
Created on: December 12, 2017
Made with: HTML, SCSS
Tags: download, icons, embedded, css-tricks
28. CSS Download App
Author: Lars Magnus Klavenes (larsmagnus)
Links: Source Code / Demo
Created on: April 18, 2017
Made with: HTML, SCSS, JS
Tags: download, app, buttons, ui, app-store
29. CSS Gradient Arrow Download Button
download icon // full button (click me!)
Author: Adam Kuhn (cobra_winfrey)
Links: Source Code / Demo
Created on: February 23, 2017
Made with: HTML, SCSS
Tags: dailycssimages, download, download-button, button, brutalist
30. Downloading Animation (Pure CSS)
dribble shot https://dribbble.com/shots/1527103-Loader-One-More-Beer However,It is modified to suit the downloading animation. Best results in chrome
Author: Akhil Sai Ram (akhil_001)
Links: Source Code / Demo
Created on: May 7, 2016
Made with: HTML, SCSS, JS
Tags: dribble, css, animation, download, load
31. Pure CSS PDF Print Download
Test to download a DOM node as a pdf without external dependencies such as html2canvas + jspdf This is achieved by using the @print css query selector and a line of javascript to initiate the print event on button click
Author: Demilade Olaleye (demilad)
Links: Source Code / Demo
Created on: February 8, 2019
Made with: HTML, CSS, JS
Tags: html2canvs, pdf, print, jspdf, download
More Awesome Lists:
Share: