Download Button Animations – Part 2
Hello Coders! Welcome to Coding Torque. In this blog, we are going to create awesome download button animations using HTML, CSS(SCSS) and JavaScript (Part 2). You should create these buttons if you are a beginner or intermediate-level web developer.
Note: Some of the code uses SCSS, if you don’t know how to run scss file with HTML then please check this article: How to use SASS in HTML
1. App Download Button Concept
Code Credits: @Varo
HTML Code
<a class="download" href="#platforms"></a>
<div class="platforms" id="platforms">
<a href="#windows" data-os="windows"></a>
<a href="#mac" data-os="mac"></a>
<a href="#linux" data-os="linux"></a>
</div>
<div class="installer" id="windows">
<div class="info" data-weight="753 KB"></div>
<div class="details">
<p>Windows installer</p>
<span>Version 1.0.6</span>
<ul>
<li>List item number one</li>
<li>List item number two</li>
<li>List item number three</li>
<li>List item number four</li>
</ul>
</div>
<label for="progressWindows"><input type="radio" id="progressWindows"/><span></span></label>
<a class="close" href="#"></a>
</div>
<div class="installer" id="mac">
<div class="info" data-weight="634 KB"></div>
<div class="details">
<p>Mac installer</p>
<span>Version 1.0.6</span>
<ul>
<li>List item number one</li>
<li>List item number two</li>
<li>List item number three</li>
<li>List item number four</li>
</ul>
</div>
<label for="progressMac"><input type="radio" id="progressMac"/><span></span></label>
<a class="close" href="#"></a>
</div>
<div class="installer" id="linux">
<div class="info" data-weight="781 KB"></div>
<div class="details">
<p>Linux installer</p>
<span>Version 1.0.6</span>
<ul>
<li>List item number one</li>
<li>List item number two</li>
<li>List item number three</li>
<li>List item number four</li>
</ul>
</div>
<label for="progressLinux"><input type="radio" id="progressLinux"/><span></span></label>
<a class="close" href="#"></a>
</div>CSS Code
body {
margin: 0;
padding: 0;
background: #2D2F33;
font-family: 'Varela Round', 'Ionicons';
}
::selection { background: #3F8EFC; color: #fff; }
a { text-decoration: none; }
.download {
position: absolute;
top: calc(50% - 30px);
right: calc(50% - 115px);
width: 230px;
height: 60px;
background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.075), rgba(255,255,255,.045));
background-image: linear-gradient(to top, rgba(0,0,0,.075), rgba(255,255,255,.045));
box-shadow: inset 0 -1px 0 rgba(0,0,0,.09),inset 0 1px 0 rgba(255,255,255,.04), 0 0 1px rgba(0,0,0,.3), 0 0 10px rgba(0,0,0,.1);
border-radius: 100px;
color: rgba(255,255,255,.9);
line-height: 60px;
text-align: center;
letter-spacing: 5px;
overflow: hidden;
transition: all .3s cubic-bezier(.67,.13,.1,.81), transform .15s cubic-bezier(.67,.13,.1,.81);
}
.download:hover {
right: calc(50% - 200px);
width: 400px;
}
.download:active {
transform: translateY(3px);
}
.download:before, .download:after {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 1;
transition: all .3s cubic-bezier(.67,.13,.1,.81);
}
.download:before {
content: 'DOWNLOAD';
}
.download:after {
content: 'Click to select a platform';
top: -60px;
opacity: 0;
}
.download:hover:after {
top: 0px;
opacity: 1;
}
.download:hover:before {
top: 60px;
opacity: 0;
}
.platforms {
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 290px);
height: 200px;
width: 580px;
background: #fff;
border-radius: 20px;
visibility: hidden;
transform: scale(.9);
opacity: 0;
overflow: hidden;
transition: all .3s cubic-bezier(.67,.13,.1,.81);
}
.platforms:target {
visibility: visible;
transform: scale(1);
opacity: 1;
}
.platforms a {
position: absolute;
top: 200px;
left: 10px;
width: 180px;
height: 180px;
border-radius: 10px;
color: #3F8EFC;
text-transform: uppercase;
transition: top .5s cubic-bezier(.67,.13,.1,.81);
}
.platforms a:nth-child(1) {
transition-delay: .1s;
}
.platforms a:nth-child(2) {
left: 200px;
}
.platforms a:nth-child(3) {
left: 390px;
transition-delay: .1s;
}
.platforms:target a {
top: 10px;
}
.platforms a:hover {
background: #E5F4FF;
box-shadow: 0 0 0 1px #A5CFFF;
}
.platforms a:before {
content: attr(data-os);
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
}
.platforms a:after {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 120px;
line-height: 140px;
text-align: center;
font-size: 300%;
transform: scale(1.25);
transform-origin: center center;
}
.platforms a:nth-child(1):after {
content: 'f247';
}
.platforms a:nth-child(2):after {
content: 'f227';
}
.platforms a:nth-child(3):after {
content: 'f2c5';
}
.installer {
position: fixed;
top: calc(50% - 150px);
left: calc(50% - 300px);
width: 600px;
height: 300px;
background: #fff;
border-radius: 20px;
visibility: hidden;
transform: scale(.9);
opacity: 0;
transition: all .3s cubic-bezier(.67,.13,.1,.81);
}
.installer:target {
visibility: visible;
transform: scale(1);
opacity: 1;
}
.installer a.back {
position: absolute;
top: 10px;
left: 10px;
width: 38px;
height: 38px;
line-height: 38px;
text-align: center;
font-size: 200%;
color: #bbb;
}
.installer a.back:before {
content: 'f129';
}
.installer a.back:after {
content: 'Back';
position: absolute;
top: 7px;
left: 30px;
height: 20;
line-height: 20px;
font-size: 40%;
text-align: center;
color: #cacaca;
border-radius: 5px;
pointer-events: none;
opacity: 0;
transition: all .2s cubic-bezier(.67,.13,.1,.81);
}
.installer a.back:hover:after {
left: 38px;
opacity: 1;
}
.installer a.close {
position: absolute;
top: 40px;
right: 40px;
font-size: 200%;
color: #bbb;
}
.installer a.close:before {
content: 'f405';
}
.installer a.close:after {
content: 'Close';
position: absolute;
top: 7px;
right: 30px;
height: 20px;
line-height: 20px;
font-size: 40%;
text-align: center;
color: #cacaca;
border-radius: 5px;
pointer-events: none;
opacity: 0;
transition: all .2s cubic-bezier(.67,.13,.1,.81);
}
.installer a.close:hover:after {
right: 38px;
opacity: 1;
}
.installer .info {
position: absolute;
top: 40px;
left: 40px;
height: calc(100% - 80px);
width: 200px;
}
.installer .info:before {
position: absolute;
top: 0px;
left: 0px;
width: 180px;
height: 220px;
line-height: 220px;
text-align: center;
font-size: 1000%;
color: #3F8EFC;
}
.installer .info:after {
content: attr(data-weight);
position: absolute;
bottom: 0px;
left: 0px;
width: 180px;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 100%;
font-weight: bolder;
letter-spacing: 2px;
color: #aaa;
}
.installer#windows .info:before {
content: 'f247';
}
.installer#mac .info:before {
content: 'f227';
}
.installer#linux .info:before {
content: 'f2c5';
}
.installer .details {
position: absolute;
top: 40px;
right: 40px;
height: 200px;
width: calc(100% - 280px);
padding: 10px;
}
.installer .details p {
margin: 0px;
font-weight: bolder;
font-size: 120%;
color: #444;
}
.installer .details span {
color: #cacaca;
}
.installer .details ul {
padding-left: 0px;
list-style: none;
color: #888;
}
.installer .details ul li {
margin-left: 0px !important;
margin-bottom: 8px;
opacity: 0;
transition: all .3s cubic-bezier(.67,.13,.1,.81);
}
.installer .details ul li:before {
content: '';
margin-right: 0;
}
.installer:target .details ul li {
margin-left: 10px;
opacity: 1;
}
.installer:target .details ul li:nth-child(1) {
transition-delay: .1s;
}
.installer:target .details ul li:nth-child(2) {
transition-delay: .2s;
}
.installer:target .details ul li:nth-child(3) {
transition-delay: .3s;
}
.installer:target .details ul li:nth-child(4) {
transition-delay: .4s;
}
.installer label {
position: absolute;
bottom: 20px;
right: 90px;
height: 40px;
width: calc(100% - 320px);
border-radius: 5px;
overflow: hidden;
cursor: pointer;
}
.installer label input {
display: none;
}
.installer label span {
position: absolute;
height: 100%;
width: 100%;
line-height: 40px;
text-align: center;
color: #fff;
background: #3F8EFC;
}
.installer label input:checked ~ span {
background: #87E544;
animation: downloadSuccess 3.1s ease;
}
.installer label span:after {
content: 'DOWNLOAD';
position: absolute;
width: 80%;
height: 100%;
top: 0px;
left: 10%;
}
.installer label input:checked ~ span:after {
content: 'Thank you for download!';
animation: downloadState 3s;
}
.installer label span:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: 0;
background: rgba(255,255,255,.2);
}
.installer label input:checked ~ span:before {
animation: downloadProgress 3s cubic-bezier(.67,.13,.1,.81);
}
@keyframes downloadSuccess {
0%, 90% {
background: #3F8EFC;
}
100% {
background: #87E544;
}
}
@keyframes downloadState {
0%, 95% {
content: 'DOWNLOADING...'
}
100% {
content: 'Thank you for download!'
}
}
@keyframes downloadProgress {
0% {
width: 5%;
opacity: 1;
}
35% {
width: 17%;
}
64% {
width: 51%;
}
81% {
width: 70%;
}
90% {
width: 86%;
opacity: 1;
}
100% {
width: 100%;
opacity: 0;
}
}
2. Download Link Button
Code Credits: @mikehobizal
HTML Code
<div class="button">
Download it!
<span>
<span></span>
</span>
</div>CSS(SCSS) Code
@import "bourbon";
$btn-color: #3CA2A2;
@include keyframes( orbit ) {
0% {
@include transform( rotateY(90deg) rotate(0deg) );
}
60% {
@include transform( rotateY(90deg) rotate( -180deg ) );
}
100% {
@include transform( rotateY(90deg) rotate( -360deg ) );
}
}
body {
margin: 100px auto;
text-align: center;
}
.button {
display: inline-block;
border-radius: 10px;
border: 1px solid rgba(#000, 0.05);
position: relative;
padding: 20px 30px 20px 70px;
background: rgba($btn-color, 0.6);
color: rgba(#000, 0.5);
cursor: pointer;
@include transform-style( preserve-3d );
@include transition( all 500ms ease-in-out);
&:hover {
@include transform( translateY(-5px));
color: rgba(#000, 0.8);
background: rgba($btn-color, 0.8);
> span {
@include transition( all 800ms ease-in-out);
@include transform( rotateY(90deg) rotate( -360deg ) );
}
}
> span {
width: 80px;
display: block;
position: absolute;
left: 0;
top: -40px;
bottom: -40px;
border-radius: 50%;
@include transform-style( preserve-3d );
@include transform( rotateY(90deg) rotate(0deg) );
> span {
position: absolute;
background: rgba(0,0,0,0.6);
width: 16px;
height: 17px;
left: 0;
top: 50px;
@include transform( rotateY(-90deg) );
&::before {
position: absolute;
content: '';
top: 100%;
left: 0;
margin-left: -7px;
border: {
top: 16px solid rgba(0,0,0,0.6);
bottom: 0 solid transparent;
left: 15px solid transparent;
right: 15px solid transparent;
}
}
}
}
}
3. Button with Sliding Information
Code Credits: @miroot
HTML Code
<a class="face-button" href="#">
<div class="face-primary">
<span class="icon fa fa-cloud"></span>
Download
</div>
<div class="face-secondary">
<span class="icon fa fa-hdd-o"></span>
Size: 52 kt
</div>
</a>
CSS(SCSS) Code
@import url('//fonts.googleapis.com/css?family=Roboto:500');
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
body {
padding: 64px 0;
text-align: center;
}
.face-button {
$height: 64px;
$accentColor: #e43;
height: $height;
display: inline-block;
border: 3px solid $accentColor;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 500;
text-align: center;
text-decoration: none;
color: $accentColor;
overflow: hidden;
.icon {
margin-right: 6px;
}
.face-primary,
.face-secondary {
display: block;
padding: 0 32px;
line-height: $height;
transition: margin .4s;
}
.face-primary {
background-color: $accentColor;
color: #fff;
}
&:hover .face-primary {
margin-top: -$height;
}
}
4. Download button
Code Credits: @ActiveCodex
HTML Code
<div>
<a href="#" download><span>Download</span><span>PDF</span></a>
<a href="#" download><span>Download</span><span>WORD</span></a>
<a href="#" download><span>Download</span><span>XSL</span></a>
</div>CSS Code
/* mockup code */
a {
background: #ffffff;
border: solid 1px #e6e6e6;
border-radius: 2px;
display: inline-block;
height: 100px;
line-height: 100px;
margin: 5px;
position: relative;
text-align: center;
vertical-align: middle;
width: 100px;
}
a span {
background: #f2594b;
border-radius: 4px;
color: #ffffff;
display: inline-block;
font-size: 11px;
font-weight: 700;
line-height: normal;
padding: 5px 10px;
position: relative;
text-transform: uppercase;
z-index: 1;
}
a span:last-child {
margin-left: -20px;
}
a:before,
a:after {
background: #ffffff;
border: solid 3px #9fb4cc;
border-radius: 4px;
content: '';
display: block;
height: 35px;
left: 50%;
margin: -17px 0 0 -12px;
position: absolute;
top: 50%;
/*transform:translate(-50%,-50%);*/
width: 25px;
}
a:hover:before,
a:hover:after {
background: #e2e8f0;
}
/*a:before{transform:translate(-30%,-60%);}*/
a:before {
margin: -23px 0 0 -5px;
}
a:hover {
background: #e2e8f0;
border-color: #9fb4cc;
}
a:active {
background: #dae0e8;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, .25);
}
a span:first-child {
display: none;
}
a:hover span:first-child {
display: inline-block;
}
a:hover span:last-child {
display: none;
}
/* custom code for the demo */
html,
button,
input,
select,
textarea {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
html {
display: table;
}
body {
background: #f5f5f5;
color: #ffffff;
display: table-cell;
margin: 0;
text-align: center;
vertical-align: middle;
}
5. Downloading Button Animaiton
Code Credits: @machuenca
HTML Code
<a href="#" class="download">
<svg width="700px" height="700px" viewBox="0 0 40 48" version="1.1" id="android">
<path d="M27.4703377,4.19382178 L29.9390848,0.715960396 C30.0856739,0.509227723 30.0491797,0.237861386 29.8575239,0.109544554 C29.666113,-0.0180594059 29.3915493,0.045029703 29.2460623,0.252 L26.6803239,3.8649505 C24.9894667,3.21873267 23.1118522,2.85861386 21.1328377,2.85861386 C19.1538232,2.85861386 17.2757188,3.21837624 15.5849841,3.8649505 L13.019613,0.251881188 C12.8725341,0.0451485149 12.5984601,-0.0181782178 12.4069268,0.109425743 C12.2153935,0.237386139 12.1790217,0.508871287 12.3256109,0.715841584 L14.7952152,4.19370297 C10.8686594,5.96590099 8.11506159,9.33350495 7.7642029,13.263802 L34.5000029,13.263802 C34.1503688,9.33350495 31.3966486,5.9660198 27.4703377,4.19382178 Z M26.7168181,9.67580198 C25.9002297,9.67580198 25.2381906,9.03338614 25.2381906,8.24067327 C25.2381906,7.44784158 25.9002297,6.80542574 26.7168181,6.80542574 C27.5342638,6.80542574 28.196058,7.44807921 28.196058,8.24067327 C28.196058,9.03326733 27.5340188,9.67580198 26.7168181,9.67580198 Z M15.5475101,9.67580198 C14.7303094,9.67580198 14.0681478,9.03338614 14.0681478,8.24067327 C14.0681478,7.44807921 14.729942,6.80542574 15.5475101,6.80542574 C16.3640986,6.80542574 17.0260152,7.44784158 17.0260152,8.24067327 C17.0261377,9.03326733 16.3640986,9.67580198 15.5475101,9.67580198 Z"
id="Shape"></path>
<path d="M6.04762826,29.6552079 C6.04762826,31.2532277 4.71228333,32.5487525 3.06502319,32.5487525 L3.06502319,32.5487525 C1.41788551,32.5487525 0.0825405797,31.2532277 0.0825405797,29.6552079 L0.0825405797,17.9512871 C0.0825405797,16.3532673 1.41788551,15.0577426 3.06502319,15.0577426 L3.06502319,15.0577426 C4.71228333,15.0577426 6.04762826,16.3532673 6.04762826,17.9512871 L6.04762826,29.6552079 L6.04762826,29.6552079 Z"
id="Shape"></path>
<path d="M7.76371304,15.1472079 L7.76371304,36.2856238 C7.76371304,37.5409901 8.81273768,38.5588515 10.1070572,38.5588515 L12.8787797,38.5588515 L12.8787797,45.0630891 C12.8787797,46.6612277 14.2140022,47.9566337 15.8612623,47.9566337 C17.5085225,47.9566337 18.8438674,46.6612277 18.8438674,45.0630891 L18.8438674,38.5588515 L23.4204609,38.5588515 L23.4204609,45.0630891 C23.4204609,46.6612277 24.7555609,47.9566337 26.4029435,47.9566337 C28.0503261,47.9566337 29.3854261,46.6612277 29.3854261,45.0630891 L29.3854261,38.5588515 L32.1571486,38.5588515 C33.4514681,38.5588515 34.5007377,37.5415842 34.5007377,36.2856238 L34.5007377,15.1472079 L7.76371304,15.1472079 L7.76371304,15.1472079 Z"></path>
<path d="M36.2167,29.6552079 C36.2167,31.2532277 37.5519225,32.5487525 39.1991826,32.5487525 L39.1991826,32.5487525 C40.8463203,32.5487525 42.1816652,31.2532277 42.1816652,29.6552079 L42.1816652,17.9512871 C42.1816652,16.3532673 40.8463203,15.0577426 39.1991826,15.0577426 L39.1991826,15.0577426 C37.5519225,15.0577426 36.2167,16.3532673 36.2167,17.9512871 L36.2167,29.6552079 L36.2167,29.6552079 Z"></path>
</svg>
<span>Android</span>
</a>
<a href="#" class="download">
<svg width="700px" height="700px" viewBox="0 0 40 48" version="1.1" id="ios">
<path d="M33.3732057,25.4546901 C33.3112919,19.3876023 38.4333971,16.4779415 38.6622967,16.3333801 C35.7842105,12.2154854 31.3010526,11.6513684 29.7033493,11.586152 C25.8879426,11.2084211 22.2585646,13.7825497 20.3221053,13.7825497 C18.390622,13.7825497 15.4025837,11.6420117 12.2382775,11.6982456 C8.07961722,11.7586901 4.24507177,14.0625965 2.10373206,17.7043275 C-2.21712919,25.0352281 0.99722488,35.8957661 5.20851675,41.8413099 C7.26631579,44.751345 9.72009569,48.0203041 12.9418182,47.9035322 C16.0443062,47.7824561 17.217512,45.9405848 20.9685167,45.9405848 C24.7195215,45.9405848 25.7736842,47.9035322 29.0571292,47.8432749 C32.3955981,47.7826433 34.5108134,44.8772865 36.5543541,41.9580819 C38.917512,38.5818012 39.8905263,35.3130292 39.9478469,35.1451696 C39.8736842,35.1121404 33.4377033,32.7013801 33.3732057,25.4546901 L33.3732057,25.4546901 Z"></path>
<path d="M27.2041148,7.65015205 C28.9139713,5.6217076 30.068134,2.80748538 29.7533014,0 C27.2902392,0.0980584795 24.3045933,1.60421053 22.537512,3.62807018 C20.9517703,5.4234386 19.5639234,8.28893567 19.9357895,11.0402807 C22.6854545,11.250152 25.4922488,9.6740117 27.2041148,7.65015205 L27.2041148,7.65015205 Z"></path>
</svg>
<span>iOS</span>
</a>
<a href="#" class="download">
<svg height="700px" width="700px" viewBox="0 0 512 499.81" version="1.1" id="windows">
<path d="M0,67.048l207.238-27.137v197.803H0V67.048z M207.238,459.904L0,432.762V262.096h207.238V459.904z M512,0v237.714H231.619 v-201L512,0z M512,499.81l-280.381-36.714v-201H512V499.81z"></path>
</svg>
<span>Windows</span>
</a>
<a href="#" class="download">
<svg height="700px" width="700px" viewBox="0 0 1000 1000" version="1.1" id="linux">
<path d="M369.954 229.402q-6.138 .558 -8.649 5.859t-4.743 5.301q-2.79 .558 -2.79 -2.79 0 -6.696 10.602 -8.37h5.58zm48.546 7.812q-2.232 .558 -6.417 -3.627t-9.765 -2.511q13.392 -6.138 17.856 1.116 1.674 3.348 -1.674 5.022zm-195.858 238.266q-2.232 -.558 -3.348 1.674t-2.511 6.975 -3.069 7.533 -5.58 7.254q-3.906 5.58 -.558 6.696 2.232 .558 6.975 -3.906t6.975 -10.044q.558 -1.674 1.116 -3.906t1.116 -3.348 .837 -2.511 .279 -2.232v-1.674t-.558 -1.395 -1.674 -1.116zm477.09 200.322q0 -10.044 -30.69 -23.436 2.232 -8.37 4.185 -15.345t2.79 -14.508 1.674 -11.997 .279 -12.555 -.558 -10.881 -1.953 -12.276 -2.232 -11.439 -2.79 -13.95 -3.069 -14.787q-5.58 -26.784 -26.226 -57.474t-40.176 -41.85q13.392 11.16 31.806 46.314 48.546 90.396 30.132 155.124 -6.138 22.32 -27.9 23.436 -17.298 2.232 -21.483 -10.323t-4.464 -46.593 -6.417 -59.706q-5.022 -21.762 -10.881 -38.502t-10.881 -25.389 -8.649 -13.671 -7.254 -8.37 -4.185 -3.906q-7.812 -34.596 -17.298 -57.474t-16.461 -31.248 -13.113 -18.414 -8.37 -22.32q-2.232 -11.718 3.348 -29.853t2.511 -27.621 -24.831 -13.95q-8.37 -1.674 -24.831 -10.044t-19.809 -8.928q-4.464 -.558 -6.138 -14.508t4.464 -28.458 20.088 -15.066q20.646 -1.674 28.458 16.74t2.232 32.364q-6.138 10.602 -1.116 14.787t16.74 .279q7.254 -2.232 7.254 -20.088v-20.646q-2.79 -16.74 -7.533 -27.9t-11.718 -17.019 -13.113 -8.37 -15.066 -4.185q-59.706 4.464 -49.662 74.772 0 8.37 -.558 8.37 -5.022 -5.022 -16.461 -5.859t-18.414 .279 -8.649 -2.79q.558 -31.806 -8.928 -50.22t-25.11 -18.972q-15.066 -.558 -23.157 15.345t-9.207 33.201q-.558 8.37 1.953 20.646t7.254 20.925 8.649 7.533q5.58 -1.674 8.928 -7.812 2.232 -5.022 -3.906 -4.464 -3.906 0 -8.649 -8.091t-5.301 -18.693q-.558 -12.276 5.022 -20.646t18.972 -7.812q9.486 0 15.066 11.718t5.301 21.762 -.837 12.276q-12.276 8.37 -17.298 16.182 -4.464 6.696 -15.345 13.113t-11.439 6.975q-7.254 7.812 -8.649 15.066t4.185 10.044q7.812 4.464 13.95 10.881t8.928 10.602 10.323 7.254 19.809 3.627q26.226 1.116 56.916 -8.37 1.116 -.558 12.834 -3.906t19.251 -5.859 16.461 -7.254 11.718 -9.765q5.022 -7.812 11.16 -4.464 2.79 1.674 3.627 4.743t-1.674 6.696 -9.207 5.301q-11.16 3.348 -31.527 11.997t-25.389 10.881q-24.552 10.602 -39.06 12.834 -13.95 2.79 -44.082 -1.116 -5.58 -1.116 -5.022 1.116t9.486 10.602q13.95 12.834 37.386 12.276 9.486 -.558 20.088 -3.906t20.088 -7.812 18.693 -9.765 16.74 -9.486 13.671 -6.696 9.765 -1.395 4.743 6.138q0 1.116 -.558 2.511t-2.232 2.79 -3.348 2.511 -4.743 2.79 -5.022 2.511 -5.58 2.79 -5.301 2.511q-15.624 7.812 -37.665 24.552t-37.107 23.994 -27.342 .558q-11.718 -6.138 -35.154 -40.734 -12.276 -17.298 -13.95 -12.276 -.558 1.674 -.558 5.58 0 13.95 -8.37 31.527t-16.461 30.969 -11.718 32.364 6.417 35.154q-12.834 3.348 -34.875 50.22t-26.505 78.678q-1.116 10.044 -.837 38.502t-3.069 32.922q-4.464 13.392 -16.182 1.674 -17.856 -17.298 -20.088 -52.452 -1.116 -15.624 2.232 -31.248 2.232 -10.602 -.558 -10.044l-2.232 2.79q-20.088 36.27 5.58 92.628 2.79 6.696 13.95 15.624t13.392 11.16q11.16 12.834 58.032 50.499t51.894 42.687q8.928 8.37 9.765 21.204t-7.812 23.994 -25.389 12.834q4.464 8.37 16.182 24.831t15.624 30.132 3.906 39.339q25.668 -13.392 3.906 -51.336 -2.232 -4.464 -5.859 -8.928t-5.301 -6.696 -1.116 -3.348q1.674 -2.79 7.254 -5.301t11.16 1.395q25.668 29.016 92.628 20.088 74.214 -8.37 98.766 -48.546 12.834 -21.204 18.972 -16.74 6.696 3.348 5.58 29.016 -.558 13.95 -12.834 51.336 -5.022 12.834 -3.348 20.925t13.392 8.649q1.674 -10.602 8.091 -42.966t7.533 -50.22q1.116 -11.718 -3.627 -41.013t-4.185 -54.126 12.834 -39.339q8.37 -10.044 28.458 -10.044 .558 -20.646 19.251 -29.574t40.455 -5.859 33.48 12.555zm-350.424 -461.466q1.674 -9.486 -1.395 -16.74t-6.417 -8.37q-5.022 -1.116 -5.022 3.906 1.116 2.79 2.79 3.348 5.58 0 3.906 8.37 -1.674 11.16 4.464 11.16 1.674 0 1.674 -1.674zm233.802 109.926q-1.116 -4.464 -3.627 -6.417t-7.254 -2.79 -8.091 -3.069q-2.79 -1.674 -5.301 -4.464t-3.906 -4.464 -3.069 -3.627 -2.232 -2.232 -2.232 .837q-7.812 8.928 3.906 24.273t21.762 17.577q5.022 .558 8.091 -4.464t1.953 -11.16zm-99.324 -118.854q0 -6.138 -2.79 -10.881t-6.138 -6.975 -5.022 -1.674q-7.812 .558 -3.906 3.906l2.232 1.116q7.812 2.232 10.044 17.298 0 1.674 4.464 -1.116zm30.132 -130.014q0 -1.116 -1.395 -2.79t-5.022 -3.906 -5.301 -3.348q-8.37 -8.37 -13.392 -8.37 -5.022 .558 -6.417 4.185t-.558 7.254 -.279 6.975q-.558 2.232 -3.348 5.859t-3.348 5.022 1.674 4.743q2.232 1.674 4.464 0t6.138 -5.022 8.37 -5.022q.558 -.558 5.022 -.558t8.37 -1.116 5.022 -3.906zm315.27 748.278q11.16 6.696 17.298 13.671t6.696 13.392 -1.395 12.555 -8.649 12.276 -13.113 10.881 -16.74 10.323 -17.577 9.207 -17.856 8.649 -15.066 7.254q-21.204 10.602 -47.709 31.248t-42.129 35.712q-9.486 8.928 -37.944 10.881t-49.662 -8.091q-10.044 -5.022 -16.461 -13.113t-9.207 -14.229 -12.276 -10.881 -26.226 -5.301q-24.552 -.558 -72.54 -.558 -10.602 0 -31.806 .837t-32.364 1.395q-24.552 .558 -44.361 8.37t-29.853 16.74 -24.273 15.903 -29.853 6.417q-16.182 -.558 -61.938 -17.298t-81.468 -23.994q-10.602 -2.232 -28.458 -5.301t-27.9 -5.022 -22.041 -5.301 -18.693 -8.091 -9.486 -10.881q-5.58 -12.834 3.906 -37.107t10.044 -30.411q.558 -8.928 -2.232 -22.32t-5.58 -23.715 -2.511 -20.367 5.859 -15.066q7.812 -6.696 31.806 -7.812t33.48 -6.696q16.74 -10.044 23.436 -19.53t6.696 -28.458q11.718 40.734 -17.856 59.148 -17.856 11.16 -46.314 8.37 -18.972 -1.674 -23.994 5.58 -7.254 8.37 2.79 31.806 1.116 3.348 4.464 10.044t4.743 10.044 2.511 9.486 .558 12.276q0 8.37 -9.486 27.342t-7.812 26.784q1.674 9.486 20.646 14.508 11.16 3.348 47.151 10.323t55.521 11.439q13.392 3.348 41.292 12.276t46.035 12.834 30.969 2.232q23.994 -3.348 35.991 -15.624t12.834 -26.784 -4.185 -32.643 -10.602 -29.016 -11.16 -20.367q-67.518 -106.02 -94.302 -135.036 -37.944 -41.292 -63.054 -22.32 -6.138 5.022 -8.37 -8.37 -1.674 -8.928 -1.116 -21.204 .558 -16.182 5.58 -29.016t13.392 -26.226 12.276 -23.436q4.464 -11.718 14.787 -40.176t16.461 -43.524 16.74 -34.038 21.762 -30.132q61.38 -79.794 69.192 -108.81 -6.696 -62.496 -8.928 -172.98 -1.116 -50.22 13.392 -84.537t59.148 -58.311q21.762 -11.718 58.032 -11.718 29.574 -.558 59.148 7.533t49.662 23.157q31.806 23.436 51.057 67.797t16.461 82.305q-2.79 53.01 16.74 119.412 18.972 63.054 74.214 121.644 30.69 32.922 55.521 90.954t33.201 106.578q4.464 27.342 2.79 47.151t-6.696 30.969 -11.16 12.276q-5.58 1.116 -13.113 10.602t-15.066 19.809 -22.599 18.693 -34.038 7.812q-10.044 -.558 -17.577 -2.79t-12.555 -7.533 -7.533 -8.649 -6.417 -11.439 -5.022 -10.881q-12.276 -20.646 -22.878 -16.74t-15.624 27.342 3.906 54.126q11.16 39.06 .558 108.81 -5.58 36.27 10.044 56.079t40.734 18.414 47.43 -19.809q32.922 -27.342 49.941 -37.107t57.753 -23.715q29.574 -10.044 42.966 -20.367t10.323 -19.251 -13.95 -15.903 -28.737 -13.113q-18.414 -6.138 -27.621 -26.784t-8.37 -40.455 8.649 -26.505q.558 17.298 4.464 31.527t8.091 22.599 11.439 15.903 11.718 10.602 11.997 7.254 9.207 5.301z"></path>
</svg>
<span>Linux</span>
</a>CSS Code
@import "bourbon";
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
$color: rgba(0,124,205,1);
/* psuedo element animations */
@include keyframes( downloadBounce ) {
to {
@include transform( translateY(0px) rotate(50deg) );
}
}
@include keyframes( downloadBounce2 ) {
to {
@include transform( translateY(0px) rotate(-50deg) );
}
}
body {
background: #D6DCE4;
text-align: center;
padding: 4em 0;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
.download {
/* rounded corner overflow mask fix */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
overflow: hidden;
border-radius: 5px;
@include box-sizing( border-box );
background: $color;
border: 2px solid $color;
color: white;
padding: 26px 0 26px 28px;
width: 220px;
display: inline-block;
position: relative;
@include transition ( all 300ms ease );
margin-right: 20px;
span {
display: block;
position: relative;
z-index: 1;
@include transform( translate(0, 0) );
&:after, &:before {
content: '';
width: 1px;
height: 16px;
background: $color;
opacity: 0;
position: absolute;
left: 50%;
top: 100%;
@include transition ( all 10ms ease-out );
@include transform-origin( center bottom );
@include transform( translateY(0) rotate(0deg) );
@include animation(0);
}
}
svg {
z-index: 0;
fill: rgba(255,255,255,1);
position: absolute;
left: 20%;
top: 50%;
@include transform( translate(-50%, -50%) rotate(0deg) scale(.04857) );
@include transition ( all 350ms ease-out );
height: 700px;
}
svg#linux {
@include transform( translate(-50%, -50%) rotate(0deg) scale(.05857) );
}
&:hover {
padding: 26px 0;
color: $color;
svg {
left: 50%;
@include transform( translate(-50%, -50%) rotate(60deg) scale(1) );
}
svg#windows {
@include transform( translate(-50%, -10%) rotate(60deg) scale(1) );
}
svg#linux {
@include transform( translate(-120%, -125%) rotate(60deg) scale(6) );
}
span {
@include transform( translate(0, -10px) scale(1.1) );
@include transition ( transform 400ms ease-out 400ms );
&:after, &:before {
opacity: 1;
@include transition ( all 400ms ease-out 400ms, transform 300ms ease-in 100ms );
}
&:after {
@include transform( translateY(7px) rotate(50deg) );
@include animation( downloadBounce 800ms linear alternate infinite);
}
&:before {
@include transform( translateY(7px) rotate(-50deg) );
@include animation( downloadBounce2 800ms linear alternate infinite);
}
}
}
}
If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque
If you have any doubt or any project ideas feel free to Contact Us
Hope you find this post helpful💖
Written by: Coding Torque | Piyush Patil
Follow us on Instagram for more projects like this👨💻
