material-ui/src/less/components/flat-button.less

Material Design UI components built with React

.mui-flat-button {

  .ease-out();
  .mui-font-style-button;
  .lh-border-radius(2px);
  .lh-user-select(none);

  position: relative;
  overflow: hidden;
  background-color: @flat-button-color;
  color: @flat-button-text-color;
  line-height: @button-height;
  min-width: @button-min-width;
  padding: 0 @desktop-gutter-less;
  margin: 0;

  .mui-flat-button-ripple {
    &.mui-is-visible {
      .ripple-click-alt(
        @animation-name: 'flat-button-ripple-click';
        @color: @flat-button-ripple-color;
      )
    }
  }

  .mui-flat-button-focus-ripple {
    background-color: @transparent;
  }

  &.mui-is-keyboard-focused {
    .mui-flat-button-focus-ripple {
      background-color: @flat-button-focus-ripple-color;
      .ripple-button-focus();
    }
  }

  &:hover,
  &.mui-is-keyboard-focused {
    background-color: @flat-button-hover-color;
  }

  &.mui-is-disabled {
    color: @flat-button-disabled-text-color;

    &:hover {
      background-color: inherit;
    }
  }

  &.mui-is-primary {
    color: @flat-button-primary-text-color;

    &:hover,
    &.mui-is-keyboard-focused {
      background-color: @flat-button-primary-hover-color;
    }

    .mui-flat-button-ripple {
      &.mui-is-visible {
        .ripple-click-alt(
          @animation-name: 'flat-primary-button-ripple-click';
          @color: @flat-button-primary-ripple-color;
        )
      }
    }

    &.mui-is-keyboard-focused {
      .mui-flat-button-focus-ripple {
        background-color: @flat-button-primary-focus-ripple-color;
      }
    }
  }
}