Download Button

Developer
Vineeth.TR
Size
2,810 Kb
Views
34,408
  1. Download Button Previews
  2. Download Button HTML Codes
  3. Download Button CSS Codes

How do I make an download button?

Download button with loading status animation . What is a download button? How do you make a download button? This script and codes were developed by Vineeth.TR on 30 October 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="css/style.css">
</head>
<body>
<button>Download</button>
</body>
</html>

Download Button - Script Codes CSS Codes

*, *::after, *::before { box-sizing: border-box;
}
html { background: #333;
}
button { width: 250px; height: 70px; margin: auto; position: fixed; left: 0; right: 0; top: 0; bottom: 0; font-size: 22px; border: 3px solid #28F2B3; color: #28F2B3; line-height: 64px; background: none; white-space: nowrap; overflow: hidden; box-shadow: 0 0 5px #222; border-radius: 70px; -webkit-animation: over 6s infinite; animation: over 6s infinite;
}
button:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: #28F2B3; -webkit-animation: load 6s infinite; animation: load 6s infinite;
}
button:after { content: ''; position: absolute; width: 15px; height: 15px; border-bottom: 3px solid; border-right: 3px solid; -webkit-transform: rotate(45deg); transform: rotate(45deg); box-shadow: 3px 3px #333, 6px 6px #28F2B3; right: 45px; top: 18px; -webkit-animation: dwd 6s infinite; animation: dwd 6s infinite;
}
@-webkit-keyframes over { 0% , 20% { line-height: 64px; width: 250px; } 25%, 100% { line-height: 150px; border-color: #28F2B3; } 30%, 100% { width: 70px; border-color: #444; }
}
@keyframes over { 0% , 20% { line-height: 64px; width: 250px; } 25%, 100% { line-height: 150px; border-color: #28F2B3; } 30%, 100% { width: 70px; border-color: #444; }
}
@-webkit-keyframes load { 0% , 40% { height: 0; } 90%, 100% { height: 100%; }
}
@keyframes load { 0% , 40% { height: 0; } 90%, 100% { height: 100%; }
}
@-webkit-keyframes dwd { 0% , 20% { right: 45px; top: 18px; } 30% , 100% { right: 25px; } 30%, 40%, 50%, 60%,70%,80% { top: 14px; } 35%, 45%, 55%, 65%,75%,85% { top: 22px; } 54% { color: #28F2B3; box-shadow: 3px 3px #333, 6px 6px #28F2B3; } 55% , 85% { color: #333; box-shadow: 3px 3px #28F2B3, 6px 6px #333; border-width: 3px; height: 15px; } 90%, 100% { box-shadow: 1px 1px #333; border-width: 5px; height: 25px; color: #fff; }
}
@keyframes dwd { 0% , 20% { right: 45px; top: 18px; } 30% , 100% { right: 25px; } 30%, 40%, 50%, 60%,70%,80% { top: 14px; } 35%, 45%, 55%, 65%,75%,85% { top: 22px; } 54% { color: #28F2B3; box-shadow: 3px 3px #333, 6px 6px #28F2B3; } 55% , 85% { color: #333; box-shadow: 3px 3px #28F2B3, 6px 6px #333; border-width: 3px; height: 15px; } 90%, 100% { box-shadow: 1px 1px #333; border-width: 5px; height: 25px; color: #fff; }
}
Download Button - Script Codes
Download Button - Script Codes
Home Page Home
Developer Vineeth.TR
Username vineethtr
Uploaded October 30, 2022
Rating 4.5
Size 2,810 Kb
Views 34,408
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!

Vineeth.TR (vineethtr) Script Codes
Name
One line Signup
404
Simple Spinner
Pagination
Semi Circle Donut Charts
Loading
Html Icons
Search Interaction
Login form shake effect
Material Login
Create amazing SEO content 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!