upload button Archives - csshint - A designer hub https://csshint.com/tag/upload-button/ Mon, 03 Aug 2020 15:35:30 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.4 Simple Upload Button Animation https://csshint.com/simple-upload-button-animation/ Mon, 03 Aug 2020 15:34:41 +0000 http://csshint.com/?p=3016 Check out this cool upload button animation using css and js, designed by Eva Lettner. 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 […]

The post Simple Upload Button Animation appeared first on csshint - A designer hub.

]]> Check out this cool upload button animation using css and js, designed by Eva Lettner.

Upload Button Animation

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]

Upload Button

The post Simple Upload Button Animation appeared first on csshint - A designer hub.

]]>