Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created August 17, 2016 02:46
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/921b59aa651ba12a29eec4aaffd6b38a to your computer and use it in GitHub Desktop.
Save CodeMyUI/921b59aa651ba12a29eec4aaffd6b38a to your computer and use it in GitHub Desktop.
Download ZIP
Upload Button
Raw
index.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>
Raw
script.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");
}
});
Raw
style.scss
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;
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Raw
upload-button.markdown

Upload Button

Tiny little micro interaction because I love buttons :)

A Pen by eva on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment