Rominou34/soft-css

button,
.button {
  padding: 0.5rem;
  line-height: 1em;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  margin: 0.5em;
  font-family: $font-default;
  box-sizing: border-box;
  @if $night-theme {
    background-color: $grey-darker;
  } @else {
    background-color: $grey-lighter;
  }
  color: $font-color-base;
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
  position: relative;
  text-align: center;
}

button:hover,
.button:hover,
.button:visited:hover,
button:focus,
.button:focus {
  cursor: pointer;
  background-color: $grey-lightest;
  color: $font-color-base;
  outline: 0;
}

button:not(.outline):hover,
.button:not(.outline):hover,
.button:not(.outline):visited:hover,
button:not(.outline):focus,
.button:not(.outline):focus {
  box-shadow: 1px 2px 6px 0 $shadow-normal;
  top: -1px;
}

.button:visited {
  color: inherit;
}

button:disabled,
.button.disabled {
  background-color: $grey-medium;
}

button:disabled:hover {
  background-color: $border-color-primary;
  cursor: not-allowed;
}

button:not(:disabled):not(.loading):active,
.button:not(.disabled):not(.loading):active {
  outline: 0;
  background-color: #d8d8d8;
  box-shadow: 0 0 0 0 black;
}

/********** MODIFIER CLASSES **********/

button.large,
.button.large {
  padding: 1rem;
  font-size: 1.5em;
}

button.large:not(.outline):hover,
.button.large:not(.outline):hover,
button.large:not(.outline):focus,
.button.large:not(.outline):focus {
  box-shadow: 2px 4px 12px 0 $shadow-normal;
  top: -2px;
}


button.loading,
.button.loading {
  padding: 0.7em 2em;
  content: '';
  pointer-events: none;
}

button.large.loading,
.button.large.loading {
  padding: 0.8em 2.5em;
}

button.loading:hover,
.button.loading:hover {
  cursor: wait;
}

button.primary.loading::after,
button.secondary.loading::after,
button.success.loading::after,
button.info.loading::after,
button.danger.loading::after,
button.warning.loading::after,
button.black.loading::after,
.button.primary.loading:after,
.button.secondary.loading::after,
.button.success.loading::after,
.button.info.loading::after,
.button.danger.loading::after,
.button.warning.loading::after,
.button.black.loading::after {
    border-color: transparent transparent white white !important;
}

button.loading::after,
.button.loading::after {
    animation: spin-right 500ms infinite linear;
    border: 2px solid #888;
    -webkit-border-radius: 2000px;
    -moz-border-radius: 2000px;
    border-radius: 2000px;
    border-right-color: transparent;
    border-top-color: transparent;
    content: "";
    display: block;
    height: $font-size-default;
    position: relative;
    width: $font-size-default;
}

button.large.loading::after,
.button.large.loading::after {
  height: $font-size-big;
  width: $font-size-big;
}

button.btn-round,
.button.btn-round {
  -webkit-border-radius: 2em !important;
  -moz-border-radius: 2em !important;
  border-radius: 2em !important;
}

button.outline,
.button.outline {
  border: 2px solid lighten($black-color, 12%);;
  background-color: transparent;
  color: lighten($black-color, 12%);;
  border-radius: 4px;
}

button.outline:hover,
.button.outline:hover,
button.outline:focus,
.button.outline:focus {
  color: #fff;
  background-color: lighten($black-color, 12%);
}

button.outline:not(:disabled):not(.loading):active,
.button.outline:not(:disabled):not(.loading):active {
  background-color: $black-color;
}

/*button.loading:after {
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    position: absolute !important;
}*/

/*************** COLORS ***************/

button.success,
button.info,
button.danger,
button.warning,
button.black,
button.primary,
button.secondary,
.button.success,
.button.info,
.button.danger,
.button.warning,
.button.black,
.button.primary,
.button.secondary {
  color: #fff;
}

.button.success:hover,
.button.info:hover,
.button.danger:hover,
.button.warning:hover,
.button.black:hover,
.button.primary:hover,
.button.secondary:hover {
  color: #fff;
}

/*
* PRIMARY
*/
button.primary,
.button.primary {
  background-color: $primary-color;
}

button.primary:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.primary:not(.disabled):not(.loading):not(.outline):hover:not(:active) {
  background-color: lighten($primary-color, 6%);
}

button.primary:not(:disabled):not(.loading):active,
.button.primary:not(.disabled):not(.loading):active {
  background-color: darken($primary-color, 6%);
}

button.primary:disabled,
.button.primary.disabled {
  background-color: lighten($primary-color, 12%);
}

button.primary.outline,
.button.primary.outline {
  color: $primary-color;
  background-color: transparent;
  border-color: $primary-color;
}

button.primary.outline:hover,
.button.primary.outline:hover,
button.primary.outline:focus,
.button.primary.outline:focus {
  color: #fff;
  background-color: $primary-color;
}

/*
* SECONDARY
*/
button.secondary,
.button.secondary {
  background-color: $secondary-color;
}

button.secondary:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.secondary:not(.disabled):not(.loading):not(.outline):hover:not(:active) {
  background-color: lighten($secondary-color, 6%);
}

button.secondary:not(:disabled):not(.loading):active,
.button.secondary:not(.disabled):not(.loading):active {
  background-color: darken($secondary-color, 6%);
}

button.secondary:disabled,
.button.secondary.disabled {
  background-color: lighten($secondary-color, 12%);
}

button.secondary.outline,
.button.secondary.outline {
  color: $secondary-color;
  background-color: transparent;
  border-color: $secondary-color;
}

button.secondary.outline:hover,
.button.secondary.outline:hover,
button.secondary.outline:focus,
.button.secondary.outline:focus {
  color: #fff;
  background-color: $secondary-color;
}

/*
* GREEN
*/
button.success,
.button.success {
  background-color: $green-color;
}

button.success:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.success:not(:disabled):not(.loading):not(.outline):hover:not(:active) {
  background-color: lighten($green-color, 6%);
}

button.success:not(:disabled):not(.loading):active,
.button.success:not(:disabled):not(.loading):active, {
  background-color: darken($green-color, 6%);
}

button.success:disabled,
.button.success.disabled {
  background-color: lighten($green-color, 12%);
}

button.success.outline,
.button.success.outline {
  color: $green-color;
  background-color: transparent;
  border-color: $green-color;
}

button.success.outline:hover,
.button.success.outline:hover,
button.success.outline:focus,
.button.success.outline:focus {
  color: #fff;
  background-color: $green-color;
}

/* BLUE */
button.info,
.button.info {
  background-color: $blue-color;
}

button.info:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.info:not(:disabled):not(.loading):not(.outline):hover:not(:active) {
  background-color: lighten($blue-color, 6%);
}

button.info:not(:disabled):not(.loading):active,
.button.info:not(:disabled):not(.loading):active {
  background-color: darken($blue-color, 6%);
}

button.info:disabled,
.button.info.disabled {
  background-color: lighten($blue-color, 12%);
}

button.info.outline,
.button.info.outline {
  color: $blue-color;
  background-color: transparent;
  border-color: $blue-color;
}

button.info.outline:hover,
.button.info.outline:hover,
button.info.outline:focus,
.button.info.outline:focus {
  color: #fff;
  background-color: $blue-color;
}

/* RED */
button.danger,
.button.danger {
  background-color: $red-color;
}

button.danger:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.danger:not(:disabled):not(.loading):not(.outline):hover:not(:active) {
  background-color: lighten($red-color, 6%);
}

button.danger:not(:disabled):not(.loading):active,
.button.danger:not(:disabled):not(.loading):active {
  background-color: darken($red-color, 6%);
}

button.danger:disabled,
.button.danger.disabled {
  background-color: lighten($red-color, 12%);
}

button.danger.outline,
.button.danger.outline {
  color: $red-color;
  background-color: transparent;
  border-color: $red-color;
}

button.danger.outline:hover,
.button.danger.outline:hover,
button.danger.outline:focus,
.button.danger.outline:focus {
  color: #fff;
  background-color: $red-color;
}

/* ORANGE */
button.warning,
.button.warning {
  background-color: $orange-color;
}

button.warning:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.warning:not(.disabled):not(.loading):not(.outline):hover:not(:active) {
  background-color: lighten($orange-color, 6%);
}

button.warning:not(:disabled):not(.loading):active,
.button.warning:not(:disabled):not(.loading):active {
  background-color: darken($orange-color, 6%);
}

button.warning:disabled,
.button.warning.disabled {
  background-color: lighten($orange-color, 12%);
}

button.warning.outline,
.button.warning.outline {
  color: $orange-color;
  background-color: transparent;
  border-color: $orange-color;
}

button.warning.outline:hover,
.button.warning.outline:hover,
button.warning.outline:focus,
.button.warning.outline:focus {
  color: #fff;
  background-color: $orange-color;
}

/* BLACK */
button.black,
.button.black {
  background-color: lighten($black-color, 12%);
}

button.black:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.black:not(:disabled):not(.loading):not(.outline):hover:not(:active) {
  background-color: lighten($black-color, 18%);
}

button.black:not(:disabled):not(.loading):active,
.button.black:not(:disabled):not(.loading):active {
  background-color: lighten($black-color, 6%);
}

button.black:disabled,
.button.black.disabled {
  background-color: lighten($black-color, 18%);
}

button.black.outline,
.button.black.outline {
  color: lighten($black-color, 12%);
  background-color: transparent;
  border-color: lighten($black-color, 12%);
}

button.black.outline:hover,
.button.black.outline:hover,
button.black.outline:focus,
.button.black.outline:focus {
  color: #fff;
  background-color: lighten($black-color, 12%);
}