# Customizing colors

**URL:** <https://meta.discourse.org/t/customizing-colors/85842>\
**Category:** Product Support\
**Created:** [April 21, 2018, 12:26am UTC](https://meta.discourse.org/t/customizing-colors/85842 "2018-04-21T00:26:36Z")\
**Posts on this page:** 1\
**Showing post:** 7

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [April 22, 2018, 6:19am UTC](https://meta.discourse.org/t/customizing-colors/85842/7 "2018-04-22T06:19:30Z")

</div>

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

```plaintext
// 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](https://github.com/discourse/discourse/blob/edf326a9a5fddb884af5782b4a896da33793bcfa/app/assets/stylesheets/common/components/buttons.scss)

---

_[View the full topic](https://meta.discourse.org/t/customizing-colors/85842)._