Custom New topic button

Hello,

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

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

New Topic button

new-topic

Open Draft button

draft-topic


I just made this demo with the default button design. You can make whatever you want. On my site the create button is pretty different but use the same technic.

#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);
    }
  }
}
      
.navigation-controls {
// If your Draft button has different text (aria-label) change the next line
  button[aria-label="Open Draft"] {
    background: var(--primary-medium) !important;
    color: var(--secondary) !important;
    border: 2px solid var(--primary-medium) !important;
    .d-icon {
      color: var(--secondary) !important;
    }
    &:hover,
    &:focus {
      background: var(--secondary) !important;
      color: var(--primary-medium) !important;
      .d-icon {
        color: var(--primary-medium) !important;
      }
    }
  }
}

The Draft button use aria-label for target so if your button text (aria label) different then you need to change the Open Draft aria-label above in css.


On my site it looks like this :arrow_down:

New Topic :arrow_down:

newtopicmy

Open Draft :arrow_down:

draft-continue

Have a nice day! :slight_smile:

8 Likes