• #codevember • View Collection •
Handcrafted with ♥ from Austin, TX by James Fleeting
@use postcss-simple-vars;
@use postcss-media-minmax;
@use postcss-nested;
$bp: 255px;
.container {
flex: 0 0 auto;
width: 70px;
height: 150px;
@media screen and (height <= $bp) {
margin: 25px auto;
}
}
.button {
display: inline-block;
padding: 12px 12px 10px;
border: 0;
border-radius: 3px;
background: #bf4d28;
text-decoration: none;
transition: all 1.2s ease-in-out;
i::after {
content: "\f019";
font-size: 40px;
color: #fff;
}
&:hover {
animation: pulse 0.2s 2 both;
}
&.loading {
i {
animation: loading 2s infinite linear;
&::after {
content: "\f1ce";
}
}
}
&.success {
border-radius: 50%;
background: #80bca3;
i::after {
content: "\f00c";
color: transparent;
animation: change-icon 1s 0.6s linear both;
}
}
}
@keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes change-icon {
0% {
color: transparent;
}
100% {
color: #fff;
}
}
@keyframes pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
to {
transform: scale3d(1, 1, 1);
}
}
html, body {
height: 100%;
@media screen and (height <= $bp) {
height: auto;
}
}
body {
display: flex;
flex-direction: column;
flex-shrink: 0;
justify-content: center;
align-items: center;
background: radial-gradient(ellipse at center, #343436 0%,#1d1f20 100%);
@media screen and (height <= $bp) {
display: block;
}
}
.view-collection {
flex: 0 0 auto;
margin: 10px 0 0;
color: #fff;
text-align: center;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
line-height: 1.6;
@media screen and (height <= $bp) {
margin: 25px auto;
}
span {
font-size: 13px;
}
.love {
color: #cc0000;
}
a {
color: #bf4d28;
text-decoration: none;
transition: all 0.7s;
&:hover, &:focus {
color: #80bca3;
}
}
}
let downloadButton = document.querySelector('.button');
if(downloadButton) {
downloadButton.addEventListener('click', function(event) {
event.preventDefault();
/* Start loading process. */
downloadButton.classList.add('loading');
/* Set delay before switching from loading to success. */
window.setTimeout(function() {
downloadButton.classList.remove('loading');
downloadButton.classList.add('success');
}, 3000);
/* Reset animation. */
window.setTimeout(function() {
downloadButton.classList.remove('success');
}, 8000);
});
};
Post a Comment