# How to add new button in different color

**URL:** https://meta.discourse.org/t/how-to-add-new-button-in-different-color/98721
**Category:** UX
**Created:** [October 4, 2018, 2:11pm UTC](https://meta.discourse.org/t/how-to-add-new-button-in-different-color/98721 "2018-10-04T14:11:55Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![rehe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rehe/32/116975_2.png) [@rehe](https://meta.discourse.org/u/rehe)
#### Post date: [October 4, 2018, 2:11pm UTC](https://meta.discourse.org/t/how-to-add-new-button-in-different-color/98721/1 "2018-10-04T14:11:56Z")

</div>

I need to add a new button just like the originals, but with a different color. How could I do it?

Explanation step by step, my English is not very good. My discourse knowledge is not good either 😄

Thanks!!

 ![32](https://global.discourse-cdn.com/meta/original/3X/a/c/acbb93124bb05c9730b5e0bb709c012e4d3baa2f.png)

---

<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: [October 4, 2018, 2:34pm UTC](https://meta.discourse.org/t/how-to-add-new-button-in-different-color/98721/2 "2018-10-04T14:34:06Z")

</div>

There’s a theme component that makes adding links to the top nav really easy:

> [@Custom Top Navigation Links](https://meta.discourse.org/t/custom-top-navigation-links/87225):
>
> discourse2Summary Custom Top Navigation Links allows you to add links to Discourse top navigation.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/custom-top-navigation-links)hammer_and_wrenchRepository Link [https://github.com/discourse/Discourse-nav-links-component](https://github.com/discourse/Discourse-nav-links-component)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Desktop Mobile Settings: …

For custom styling, you can use that theme component and then target the link using the title attribute (which you configure in the theme component settings as the link description).

If you set up your new link’s description to be “This is an example title” you could target it using CSS like this:

```CSS
.nav-pills>li[title="This is an example title"] {
   background: blue;
   >a { color: white; }
}

```

---

<div class="post-metadata">

### Author: ![robmc](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/robmc/32/125900_2.png) [@robmc](https://meta.discourse.org/u/robmc)
#### Post date: [October 4, 2018, 2:39pm UTC](https://meta.discourse.org/t/how-to-add-new-button-in-different-color/98721/3 "2018-10-04T14:39:25Z")

</div>

Doesn’t that target the header rather than the Top Nav?

This is a component for a specific link but might be able to be adapted depending on what you want the button to do:

> [@Add /users to top nav](https://meta.discourse.org/t/add-users-to-top-nav/63681):
>
> Location repo: [GitHub - discourse/discourse-users-nav: Add users nav for Discourse (theme component) · GitHub](https://github.com/SamSaffron/discourse-users-nav)Preview About This theme component adds the full nav bar on both mobile and desktop on the users page: Install guide [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)

---

<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: [October 4, 2018, 2:44pm UTC](https://meta.discourse.org/t/how-to-add-new-button-in-different-color/98721/4 "2018-10-04T14:44:21Z")

</div>

ah you’re right, I linked the wrong component! Fixed my reply