Check out this cool upload button animation using css and js, designed by Eva Lettner.
Demo : Upload Button Animation
The Html
[code language=”html”]
<body>
<div class="upload">
<span class="glyphicon glyphicon-arrow-up arrow" aria-hidden="true"></span>
<span class="glyphicon glyphicon-ok ok" aria-hidden="true"></span>
</div>
<div class="button" data-text-swap="reset">upload</div>
</body>
[/code]
CSS / SCSS
[code language=”css”]
body{
background-color: #d4c2f2;
}
.upload{
text-align: center;
color: #fff;
text-shadow: 0 2px 0 hsla(0,0%,0%,.075);
font-size: 30px;
background: {
image: linear-gradient(to bottom, #b6c5cc 50%, #c0e8b9 50%);
position: 0% 0%;
size: 230%;
}
background-color: #b6c5cc;
background-repeat: no-repeat;
border: 6px solid #fff;
border-radius: 50px;
box-shadow: inset 0 2px 0 hsla(0,0%,0%,.1), 0 3px 0 hsla(0,0%,0%,.075);
cursor: pointer;
height: 80px;
left: 50%;
margin: -43px;
margin-top: -100px;
position: absolute;
top: 50%;
width: 80px;
transition: background 3s ease-in-out;
}
.uploading{
background-position: 0% 100%;
}
span{
margin-top: 16px;
margin-left: -3px;
transition: 0.1s 2s ease-in-out;
}
.ok{
position: absolute;
left: 22px;
top: 50px;
opacity: 0;
}
.bounce{
animation: bounce 0.3s ease 2.5s forwards;
}
.arrow-out{
top: -20px;
visibility: hidden;
}
.button{
position: absolute;
width: 120px;
height: 30px;
background-color: #fff;
top: 50%;
left: 50%;
margin-left: -60px;
margin-top: 10px;
border-radius: 5px;
box-shadow: 0 3px 0 hsla(0,0%,0%,.075);
text-align: center;
line-height: 30px;
font-size: 16px;
text-transform: uppercase;
color: #888;
cursor: pointer;
transition: 0.2s;
&:active{
box-shadow: 0 0 0;
margin-top: 12px;
}
}
@keyframes bounce{
0%{
top: 50px;
opacity: 0;
}
80%{
top: -5px;
}
100%{
top: 0;
opacity: 1;
}
}
[/code]
JS
[code language=”js”]
var button = document.querySelector(‘.button’);
var upload = document.querySelector(‘.upload’);
var arrow = document.querySelector(‘.arrow’);
var ok = document.querySelector(‘.ok’);
button.addEventListener(‘click’, function() {
upload.classList.toggle(‘uploading’)
arrow.classList.toggle(‘arrow-out’)
if(arrow.classList.contains(‘arrow-out’)){
ok.classList.add(‘bounce’);
}else{
ok.classList.remove(‘bounce’);
}
if (button.getAttribute("data-text-swap") == button.innerHTML) {
button.innerHTML = button.getAttribute("data-text-original");
} else {
button.setAttribute("data-text-original", button.innerHTML);
button.innerHTML = button.getAttribute("data-text-swap");
}
});
[/code]
