Common Button States and Styles

There are infinite possible styles for buttons but here are some examples of the most used ones.

Border Width

Border Style

Border Radius

Background Color


  • 1 value: Same padding for every side.
  • 2 values: First value for up and down, second for left and right.
  • 4 values: Up, right, down, left.



The hover state starts when the user drags the cursor over the button. You can set all the styles to something different so that it changes, but here are some other useful examples:
  • Transform: scale(1.02) - This makes the button a little bit bigger when you hover over it.
  • Opacity: 0.8 - This makes the whole component a little bit more transparent. You can also do it the other way, set the opacity to less than one on the default state, and 1 on hover.
  • Transition: 1s - Makes the change of styles last 1 second in this case.


The selected state will be useful for Option Selectors for example. Whatever styles you set in this state will be applied to the user's selection.

Content Display

If you set the button to display: flex, you get access to these properties:
Note that the above assume flex-direction is set to row (the default value). If it's set to column then in the above diagram align-items and justify-content swap roles.
When having text and image (or icon or description) you can make use of space-around and space-between