silverstripe-framework/admin/client/src/components/FormAction/FormAction.scss

// TODO Separate out bootstrap btn reset styles to a separate style sheet or divide within this sheet
// TODO Rename component to something like Btn or Button?

// Button wrapper
.btn-toolbar {
  margin-top: $spacer-y;
  margin-bottom: $spacer-y;

  fieldset + & {
    margin-top: 0;
  }
}

// General buttons
.btn {
  margin-right: $spacer-x * .5; // 8px
  position: relative;
  box-shadow: none;
}

// Button icons
.btn[class*="font-icon-"]::before {
  position: relative;
  margin-right: 6px;
  line-height: $line-height-base;
  font-size: 16px;
  float: left;
}

.btn--icon-danger:hover::before {
  color: $brand-danger;
}

// Gives button a larger icon
.btn--icon-md[class*="font-icon-"]::before {
  font-size: 17px;
  position: relative;
}

.btn--icon-large[class*="font-icon-"]::before {
  font-size: 20px;
  top: -1px;
  position: relative;
}

.btn--icon-xl[class*="font-icon-"]::before {
  font-size: 22px;
  top: -1px;
  position: relative;
}


// For buttons with icon and no text, removes space after icon
// TODO replace all .no-text classes for .btn--no-text
.btn--no-text[class*="font-icon-"]::before,
.no-text[class*="font-icon-"]::before {
  margin-right: 0;
  color: lighten($color-text, 10%);
}


// loading icon
.btn__loading-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-top: -2px;

  .btn__circle {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: $gray;
    display: inline-block;
    margin: 0 2px;
    animation: loading-icon 1.2s infinite ease-in-out both;
    white-space: nowrap;
  }

  .btn__circle--1 {
    animation-delay: -.32s;
  }

  .btn__circle--2 {
    animation-delay: -.16s;
  }
}

.btn--loading > span,
.btn--loading::before {
  visibility: hidden;
}

@keyframes loading-icon {
  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}


// Specific button variations
.btn-primary {
  border-bottom-color: $btn-primary-shadow;

  .btn__circle {
    background: $white;
  }
}

.btn-primary-outline {
  border-color: lighten($btn-primary-border, 10%);

  &:hover,
  &:active,
  &:focus {
    color: darken($btn-primary-bg, 10%);
    background-image: none;
    background-color: lighten($btn-primary-bg, 50%);
    border-color: $btn-primary-border;
  }

  .btn__circle {
    background: $btn-primary-bg;
  }
}


.btn-secondary {
  border-color: transparent;
  background-color: transparent;

  &:hover,
  &:active,
  &:focus,
  &:active:hover,
  &:active:focus {
    background-color: $gray-lighter;
    border-color: transparent;
  }
}

.btn-secondary-outline {
  color: $btn-secondary-color;

  &:hover,
  &:focus,
  &:active,
  &:active:focus,
  &:active:hover {
    background-color: $gray-lighter;
    color: $btn-secondary-color;
  }

  .btn__circle {
    background: $btn-secondary-color;
  }
}

.btn-danger {
  .btn__circle {
    background: $white;
  }
}

.btn-danger-outline {
  .btn__circle {
    background: $brand-danger;
  }
}

.btn-link {
  .btn__circle {
    background: $link-color;
  }
}

// Apply to things like panel close btn
.btn--top-right {
  float: right;
  right: 0;
  margin-right: 5px;
  position: absolute;

  // Temp override JQueryUI color
  &::before {
    color: $body-color-light;
  }
}

// Grouped buttons
.btn-group {
  margin-right: $spacer-x * .75; // 12px

  .btn {
    margin-right: 0;
  }

  .btn-primary {
    border-left: 1px solid $btn-primary-shadow;

    &:first-child {
      border-left: 0;
    }
  }
}

// Remove focus from these actions
// For things like popovers which have other indications they are focused
.btn--no-focus:focus {
  outline: none;
}