# Customize the New Topic button

**URL:** <https://meta.discourse.org/t/customize-the-new-topic-button/197848>\
**Category:** Developers\
**Tags:** how-to\
**Created:** [July 22, 2021, 11:34am UTC](https://meta.discourse.org/t/customize-the-new-topic-button/197848 "2021-07-22T11:34:47Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [July 22, 2021, 11:34am UTC](https://meta.discourse.org/t/customize-the-new-topic-button/197848/1 "2021-07-22T11:34:47Z")

</div>

Hello,

I just want to share with you how I make our new topic button. Little CSS 🙂

I use for this color variables. (`tertiary`, `secondary` and `primary-medium`)

**New Topic button**

![new-topic](https://global.discourse-cdn.com/meta/original/3X/0/0/00eff69c3ff5b23f725e12ce244a6c0892779804.gif)

**Open Draft button**

![draft-topic](https://global.discourse-cdn.com/meta/original/3X/9/c/9c8cdb912c3016e62fec74c73f4f4e11bef81f37.gif)

* * *

```scss
#create-topic {
  color: var(--secondary);
  border: 2px solid var(--tertiary);
  background: var(--tertiary);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--tertiary);
    .d-icon {
      color: var(--tertiary);
    }
  }
  &.open-draft {
    background: var(--primary-medium);
    border: 2px solid var(--primary-medium);
    transition: background .25s ease-out;
    &:focus,
    &:hover {
      background: var(--secondary);
      color: var(--primary-medium);
      border: 2px solid var(--primary-medium);
      .d-icon {
        color: var(--primary-medium);
      }
    }
  }
}

```

* * *

Have a nice day! 🙂

---

_[View the full topic](https://meta.discourse.org/t/customize-the-new-topic-button/197848)._