mdb-ui-kit/scss/_buttons.scss

// specification: https://www.google.com/design/spec/components/buttons.html

// mdb default buttons are flat by default
.btn {
  position: relative;
  margin-bottom: $mdb-btn-margin-bottom; // just enough room so that focus shadows aren't covered up
  font-size: $mdb-btn-font-size;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  transition: box-shadow 0.2s $mdb-animation-curve-fast-out-linear-in, background-color 0.2s $mdb-animation-curve-default, color 0.2s $mdb-animation-curve-default;
  will-change: box-shadow, transform;

  @include undo-bs-tab-focus();

  //--
  // Colors

  // flat removes bg, add color variations to text
  @include mdb-button-color();

  // fab and raised are colored, add their text and bg
  &.btn-fab,
  &.btn-raised,
  .btn-group-raised & {
    @include mdb-button-colored();
  }

  //---
  // btn-raised
  &.btn-raised,
  .btn-group-raised & {

    // baseline shadow
    @include shadow-2dp();

    // contrast bg colors on hover, focus, active
    @include mdb-hover-focus-active() {
      @include mdb-button-colored-bg(true);
      //border: 1px solid $red;
    }

    // enlarged shadow on hover, focus
    @include hover-focus() {
      //border: 1px solid $blue;
      @include shadow-4dp();
    }

    // :active - momentary press: big shadow, release and it is gone
    // .active - persistent big shadow
    &.active,
    &:active {
      @include focus-shadow();
      //border: 1px solid $green;
    }

    // reverse any of the above for links
    &.btn-link {
      box-shadow: none;
      @include mdb-hover-focus-active() {
        box-shadow: none;
      }
    }

    @include mdb-disabled() {
      box-shadow: none;
    }
  }

  &.btn-fab {
    // see above for color variations
    position: relative;
    width: $mdb-btn-fab-size;
    min-width: $mdb-btn-fab-size;
    height: $mdb-btn-fab-size;
    padding: 0;
    margin: auto;
    overflow: hidden;
    font-size: $mdb-btn-fab-font-size;
    line-height: normal;
    border-radius: 50%;
    box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light;

    .ripple-container {
      border-radius: 50%;
    }

    &.btn-fab-mini,
    .btn-group-sm & {
      width: $mdb-btn-fab-size-mini;
      min-width: $mdb-btn-fab-size-mini;
      height: $mdb-btn-fab-size-mini;

      &.material-icons {
        top: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
        left: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
      }
    }

    i.material-icons {
      position: absolute;
      top: 50%;
      left: 50%;
      width: $mdb-btn-fab-font-size;
      line-height: $mdb-btn-fab-font-size;
      transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
    }
  }

  // Align icons inside buttons with text
  i.material-icons {
    vertical-align: middle;
  }

  // Size variations
  &.btn-lg,
  .btn-group-lg & {
    font-size: $mdb-btn-font-size-lg;
  }
  &.btn-sm,
  .btn-group-sm & {
    padding: 5px 20px;
    font-size: $mdb-btn-font-size-sm;
  }
}

// Disabled buttons and button groups
.btn,
.input-group-btn .btn,
.btn-group,
.btn-group-vertical {
  // have to ratchet up the specificity to kill drop shadows on disabled raised buttons
  @include mdb-disabled() {
    color: $mdb-btn-disabled;
    .theme-dark & {
      color: $mdb-btn-disabled-dark;
    }

    // flat buttons shouldn't lose transparency on disabled hover/focus
    &,
    &:hover,
    &:focus {
      background: transparent;
    }

    // no box-shadow on raised - need specificity
    //&.btn-raised,
    //&.btn-group-raised {
    //  &,
    //  &.active,
    //  &:active,
    //  &:focus:not(:active) {
    //    box-shadow: none;
    //  }
    //}
  }
}

// btn-group variations
.btn-group,
.btn-group-vertical {

  position: relative;
  margin: 10px 1px;

  // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
  &.open {
    .dropdown-toggle {
      //box-shadow: none;
    }

    > .dropdown-toggle.btn {
      @include mdb-button-colored-bg();
    }
  }

  .dropdown-menu {
    border-radius: 0 0 $border-radius $border-radius;
  }

  &.btn-group-raised {
    @include shadow-2dp();
  }

  .btn + .btn,
  .btn,
  .btn:active,
  .btn-group {
    margin: 0;
  }
}