# Discourse Button Styles

**URL:** <https://meta.discourse.org/t/discourse-button-styles/88154>\
**Category:** Theme component\
**Created:** [May 22, 2018, 3:38pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154 "2018-05-22T15:38:29Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [May 22, 2018, 3:38pm UTC](https://meta.discourse.org/t/discourse-button-styles/88154/1 "2018-05-22T15:38:29Z")

</div>

This theme component includes basic settings for changing button colors without writing CSS.

[Github repo](https://github.com/awesomerobot/discourse-button-styles): `https://github.com/awesomerobot/discourse-button-styles`

Installation: [Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)

Preview: [Example of what you can style with the settings in this theme](https://theme-creator.discourse.org/theme/awesomerobot/button-styles)

 ![25%20AM](https://global.discourse-cdn.com/meta/original/3X/0/5/0506bbb7635a79f76a24cd4d249f4e4d3fb8562e.png)

What the settings look like:

 ![37%20AM](https://global.discourse-cdn.com/meta/original/3X/2/5/25955501d91ca84d2c9f925e640b49eb1b7d8641.png)

There are 6 button sets that can be styled in this component, along with a global style for adding rounded corners to all buttons (border-radius):

- basic buttons
- primary buttons
- header buttons
- nav pills
- post controls
- editor buttons

For advanced button styling you may also consider looking at the `common.scss` file as a starting point for your custom CSS. In the future I’ll be using what I learned here to reduce the number of CSS styles required to style buttons in Discourse (and I’ll maintain/simplify this theme as I go).

---

_[View the full topic](https://meta.discourse.org/t/discourse-button-styles/88154)._