Stunning Animated CSS3 Download Button

Developer
Faizan Asad
Size
2,151 Kb
Views
32,384
  1. Stunning Animated CSS3 Download Button Previews
  2. Stunning Animated CSS3 Download Button HTML Codes
  3. Stunning Animated CSS3 Download Button CSS Codes

How do I make an stunning animated css3 download button?

By Faizan Asad. What is a stunning animated css3 download button? How do you make a stunning animated css3 download button? This script and codes were developed by Faizan Asad on 04 July 2022, Monday.

Stunning Animated CSS3 Download Button Previews
IQ Test

Stunning Animated CSS3 Download Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stunning Animated CSS3 Download Button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="button"> <a href="#">Download</a> <p class="top">Its Totally Free</p> <p class="bottom">6.2MB .zip</p> </div>
</body>
</html>

Stunning Animated CSS3 Download Button - Script Codes CSS Codes

.button { width: 200px; margin: 150px auto;
}
.button a { display: block; height: 50px; width: 200px; /*TYPE*/ color: white; font: 17px/50px Helvetica, Verdana, sans-serif; text-decoration: none; text-align: center; text-transform: uppercase; /*GRADIENT*/ background: #00b7ea; /* Old browsers */ background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */ background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.button a, p { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
p { background: #222; display: block; height: 40px; width: 180px; margin: -50px 0 0 10px; /*TYPE*/ text-align: center; font: 12px/45px Helvetica, Verdana, sans-serif; color: #fff; /*POSITION*/ position: absolute; z-index: -1; /*TRANSITION*/ -webkit-transition: margin 0.5s ease; -moz-transition: margin 0.5s ease; -o-transition: margin 0.5s ease; -ms-transition: margin 0.5s ease; transition: margin 0.5s ease;
}
/* HOVER ================================================== */
.button:hover .bottom { margin: -10px 0 0 10px }
.button:hover .top { margin: -80px 0 0 10px; line-height: 35px;
}
/* ACTIVE ================================================== */
.button a:active { background: #00b7ea; /* Old browsers */ background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */ background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.button:active .bottom { margin: -20px 0 0 10px }
.button:active .top { margin: -70px 0 0 10px }
Stunning Animated CSS3 Download Button - Script Codes
Stunning Animated CSS3 Download Button - Script Codes
Home Page Home
Developer Faizan Asad
Username faizanasad
Uploaded July 04, 2022
Rating 3
Size 2,151 Kb
Views 32,384
Do you need developer help for Stunning Animated CSS3 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!

Faizan Asad (faizanasad) Script Codes
Name
Awesome CSS Footer Social Buttons
A Pen by Faizan Asad
Menubar
Facebook nav
Blog sign
Google Style Footer
Amazing animated CSS Ghost Button
Slingshot Game
Amazing Tag Cloud
CSS Awesome Task List Check Box
Create amazing love letters 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!