Customizing colors

Product Support
7

If you’re looking for the selectors, this should cover most buttons:

// Mind specificity, more specific selectors will override
// more general ones

// Base
// --------------------------------------------------

.btn {
  // general styles apply to all buttons

  &:active,
  &.btn-active {
    // active buttons
  }

  &:hover,
  &.btn-hover {
    // hovered buttons
  }

  &[disabled],
  &.disabled {
    // disabled buttons
    &:hover {
      // hovered disabled buttons
    }
  }

  .fa {
    // styles for .fa elements
    // inside buttons
  }

  .d-icon {
    // styles for .d-icon elements
    // inside buttons (icons)
  }

  &.no-text {
    // styles for buttons with
    // no text

    .fa {
      // styles for .fa elements
      // inside buttons with no
      // text
    }
  }

  &.hidden {
    // hidden buttons
  }

  &[href] {
    // links that look like
    // buttons experiment with
    // background: red;
    // to see them
  }

  &.btn-primary .d-icon {
    // styles for .d-icon elements
    // inside  primary buttons (icons)
  }
}

// Primary button
// --------------------------------------------------

.btn-primary {
  // primary buttons, like the Reply button

  &[href] {
    // links that look like
    // primary buttons experiment with
    // background: red;
    // to see them
  }
  &:hover,
  &.btn-hover {
    // hovered primary buttons
  }
  &:active,
  &.btn-active {
    // active primary buttons
  }
  &[disabled],
  &.disabled {
    // disabled primary buttons
  }
}

// Danger button
// --------------------------------------------------

.btn-danger {
  // danger buttons like
  // delete and cancel

  &[href] {
    // links that look like
    // danger buttons
  }
  &:hover,
  &.btn-hover {
    // hovered danger buttons
  }
  &:active,
  &.btn-active {
    // active danger buttons
  }
  &[disabled],
  &.disabled {
    // disabled danger buttons
  }
}

// Social buttons
// --------------------------------------------------

.btn-social {
  // social buttons like facebook
  // twitter google

  &:hover {
    // hoverd social buttons
  }
  &[href] {
    // links that look
    // like social buttons
  }
  &:before {
    // :before psudo-element
    // for all social buttons
  }
  &.google,
  &.google_oauth2 {
    // google buttons

    &:before {
      // google buttons :before
    }
  }
  &.instagram {
    // instagram buttons

    &:before {
      // instagram buttons :before
    }
  }
  &.facebook {
    // facebook buttons

    &:before {
      // facebook buttons :before
    }
  }
  &.twitter {
    // twitter buttons

    &:before {
      // twitter buttons :before
    }
  }
  &.yahoo {
    // yahoo buttons

    &:before {
      // yahoo buttons :before
    }
  }
  &.github {
    // github buttons

    &:before {
      // github buttons :before
    }
  }
}

// Button Sizes
// --------------------------------------------------

.btn-small {
  // small buttons
}

.btn-large {
  // large buttons
}

.btn-flat {
  // flat buttons

  .d-icon {
    // icons inside flat buttons
  }
}

This can be found here:
discourse/app/assets/stylesheets/common/components/buttons.scss at edf326a9a5fddb884af5782b4a896da33793bcfa · discourse/discourse · GitHub