Skip to content

Instantly share code, notes, and snippets.

@kyleparisi
Last active May 9, 2018 19:20
Show Gist options
  • Save kyleparisi/14ef5c3a967860589a4ccef4697c4642 to your computer and use it in GitHub Desktop.
Save kyleparisi/14ef5c3a967860589a4ccef4697c4642 to your computer and use it in GitHub Desktop.
window.addClass = function(el, className) {
if (el.classList) el.classList.add(className);
else el.className += " " + className;
};
window.removeClass = function(el, className) {
if (el.classList) el.classList.remove(className);
else
el.className = el.className.replace(
new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"),
" "
);
};
window.busy = function() {
var that = this;
addClass(this, "busy");
setTimeout(function() {
that.disabled = true;
}, 0);
};
window.removeBusy = function() {
removeClass(this, "busy");
this.disabled = false;
}
button {
position: relative;
border: none;
border-radius: 4px;
outline: none;
text-decoration: none;
color: #fff;
background: #32325d;
white-space: nowrap;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
border-radius: 4px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.025em;
text-decoration: none;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
}
button:hover {
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
background-color: #43458b;
}
button:after {
position: absolute;
left: calc(50% - 0.5em);
top: 25%;
height: 1em;
width: 1em;
content: '';
opacity: 0;
line-height: 100%;
border-left: 2px solid rgba(255, 255, 255, 0.2);
border-right: 2px solid rgba(255, 255, 255, 0.2);
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
border-top: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 100%;
-webkit-animation: rotate 0.6s infinite linear;
-moz-animation: rotate 0.6s infinite linear;
-ms-animation: rotate 0.6s infinite linear;
-o-animation: rotate 0.6s infinite linear;
animation: rotate 0.6s infinite linear;
-moz-transition: opacity 0.15s ease-out;
-o-transition: opacity 0.15s ease-out;
-webkit-transition: opacity 0.15s ease-out;
transition: opacity 0.15s ease-out;
}
button.busy {
color: transparent;
}
button.busy:after {
opacity: 1;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment