.button {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0.625em;
    margin: 0 0.625em 0 0;
    border: 1px solid #ccc;
    background-color: #fff;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    text-decoration: none !important;
}

/* (Firefox) Removes outline from buttons */
.button::-moz-focus-inner {
  border: 0;
}

.button:hover,
.button:focus {
    border: 1px solid #bbb;
    background-color: #eee;
}

.button:active {
    border-color: #aaa;
    background-color: #eee;
}



.button.fixate {
    border-color: #226491;
    background-color: #378cd2;
    color: #fff;
}

.button.fixate:hover,
.button.fixate:focus {
    background-color: #3282be;
}

.button.fixate:active { }



.button.link {
    border-color: #226491;
    background-color: #378cd2;
    color: #fff;
}

.button.link:hover,
.button.link:focus {
    background-color: #3282be;
}

.button.link:active { }



.button.success {
    border-color: #2d963c;
    background-color: #3cb950;
    color: #fff;
}

.button.success:hover,
.button.success:focus {
    background-color: #37aa4a;
}

.button.success:active { }



.button.caution {
    border-color: #e6a555;
    background-color: #f5af5f;
    color: #fff;
}

.button.caution:hover,
.button.caution:focus {
    border-color: #d28c46;
    background-color: #eba055;
}

.button.caution:active { }



.button.failure {
    border-color: #c34646;
    background-color: #eb5a5a;
    color: #fff;
}

.button.failure:hover,
.button.failure:focus {
    background-color: #cd4646;
    border-color: #962323;
}

.button.failure:active { }



.rounded .button {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}