Image

Real time example

Inspect the HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>

.buttons,
[class*='buttons-'] {
background: #00B6E9;
}

.buttons,
[class*='buttons-'] {
background: #00B6E9;
display: inline-block;
padding: 1rem 2rem;
color: #232323;
font: 200 1.5rem "Source Sans Pro";
text-transform: lowercase;
text-decoration: none;
text-align: left;
transition: 0.5s linear all;
}
.buttons:hover,
[class*='buttons-']:hover {
background: #50d9ff;
}

.download-wrap {
perspective: 80rem;
perspective-origin: 50% 50% 0;
width: 15rem;
height: 4rem;
margin: 0 auto;
}

.download {
position: relative;
width: 15rem;
height: 4rem;
transform-style: preserve-3d;
transform-origin: 50% 50% 0;
transform: rotateX(0deg);
transition: 0.2s linear all;
}

.buttons-download {
box-sizing: border-box;
position: relative;
width: 15rem;
height: 4rem;
font-size: 1.5rem;
font-weight: 200;
line-height: 4rem;
padding: 0 2rem;
transform-origin: top center;
}

.icon-wrap {
position: absolute;
right: 0.5rem;
top: 0;
bottom: 0;
width: 4rem;
padding-top: 1.66rem;
background: rgba(0, 0, 0, 0.1);
}

.icon-download {
box-sizing: border-box;
position: relative;
display: block;
width: 2.5rem;
height: 1rem;
margin: auto;
border: solid 0.5rem #232323;
border-top: none;
}
.icon-download:before, .icon-download:after {
content: '';
display: block;
position: absolute;
animation: icon-bounce .5s infinite alternate;
}
.icon-download:before {
left: 0.5rem;
top: -0.5rem;
width: 0.5rem;
height: 0.5rem;
background: #232323;
}
.icon-download:after {
left: 0.25rem;
top: -0.125rem;
width: 0;
height: 0;
border-left: solid 0.5rem transparent;
border-right: solid 0.5rem transparent;
border-top: solid 0.5rem #232323;
}

@keyframes icon-bounce {
from {
transform: translateY(-5px);
}
to {
transform: translateY(0);
}
}

</style>
<body>
<div class="download-wrap">
<div class="download">
<a href="#" target="_blank" class="buttons-download">
Download
<span class="icon-wrap">
<i class="icon-download"></i>
</span>
</a>
</div>
</div>
</body>
</html>

Download this HTML Source Code

Kumar Lakshmanan

Download Button Version_5

Image

Real time example

Inspect the HTML

Download this HTML Source Code

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Button bubble effect using javascript

St.Mary's HSS | My School

Header on toggle Button

Total Pageviews

Contact Form

Footer Menu Widget

Kumar Lakshmanan

Download Button Version_5

Image

Real time example

Inspect the HTML

Download this HTML Source Code

You may like these posts

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Button bubble effect using javascript

St.Mary's HSS | My School

Header on toggle Button

Total Pageviews

Contact Form

Footer Menu Widget