/**
 * You like these buttons? Read more about them on:
 * https://github.com/ibudiallo/buttons
**/

@keyframes btn-click {
    from {
        width:30px;
        height:30px;
        opacity:1;
    }
    to {
        width:150px;
        height:150px;
        opacity: 0;
    }
}
.btn {
    position: relative;
    top: 0;
    border: none;
    padding: 12px 16px;
    background-color: #d0d0d0;
    color: #111;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 0 2px 2px rgba(0,0,0,.16);
    border-bottom: 1px solid #aaa;
    outline: none;
    transition: background-color .2s, box-shadow .2s;
    overflow:hidden;
    cursor:pointer;
    display:inline-block;
}
.btn.animate::after {
    position: absolute;
    content:" ";
    top:var(--coord-y);
    left:var(--coord-x);
    transform: translateX(-50%) translateY(-50%);
    background-color:rgba(0,0,0,.1);
    display:block;
    border-radius: 50%;
    animation: btn-click ease-out .5s normal;
}
.btn:hover {
    top:-1px;
    background-color:#dadada;
    border-bottom-width: 2px;
    box-shadow: 0px 2px 4px rgba(0,0,0,.16);
}
.btn:active {
    top:1px;
    background-color: #cdcdcd;
    box-shadow: 0px 1px 1px rgba(0,0,0,.16);
    border-bottom-width: 0;
}
.btn.primary {
    background-color:#2980b9;
    color:#fff;
    border-bottom-color: #1e608c;
}
.btn.primary:hover {
    background-color:#3498db;
}
.btn.primary:active {
    background-color:#2672a5;
}
.btn.danger {
    background-color:#c0392b;
    color:#fff;
    border-bottom-color: #9e2f23;
}
.btn.danger:hover {
    background-color:#de4434;
}
.btn.danger:active {
    background-color:#a93226;
}
.btn.warning {
    background-color:#f1c40f;
    color:#fff;
    border-bottom-color: #caa40d;
}
.btn.warning:hover {
    background-color:#ffd323;
}
.btn.warning:active {
    background-color:#deb40d;
}
.btn[disabled]{
    color:#999;
    background-color: #d0d0d0;
    border-bottom-color: #aaa;
}
.btn[disabled]:hover {
    top:0;
    background-color: #d0d0d0;
    border-bottom-width: 1px;
    box-shadow: 0 2px 2px rgba(0,0,0,.16);
}