Looking at Slack by example, the following happens:

  • Buttons in the top navigation bar become lighter, so does the search bar
  • The button to open the workspace menu becomes darker, same for hovering over channels in the side bar, while items in the huddle bar beneath become lighter again
  • Workspaces get a thick white border

What would have been the thought process behind this?


1 Answer 1


There really is no "set in stone" rule. As long as they are visible and accessible, you are OK.

However, it is quite common to make links darker on light backgrounds and links lighter on dark backgrounds. Again, this is not a rule. You can also use a completely different color.

The above comments refer to text links. For elements like buttons, you have more options. Consider the following image:

Insert image description here

Here you can see how to display a hover state on a navbar element in Material Design V2, using three different techniques: Changing the text color, adding a background color, and adding a line at the bottom.

The following image shows Material Design's approach to buttons:

Insert image description here

This time the color is the same, the background is a bit lighter, and the button is given a larger shadow since it is meant to convey three-dimensionality.

Then we have the new Material Design 3:

Insert image description here

Simply add 8% opacity!


As you can see, there is no real answer when not even the same guidelines can agree. However, the conclusion is that there are more options than just color. Just make it work and you will be fine.

  • 1
    Nice answer. I was tempted to put mine but I know if I start I write the bible of buttons 😓. So, I preferred upvote & forget 😉.
    – Danielillo
    Commented Jul 22, 2022 at 17:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.