Common Button States and Styles
There are infinite possible styles for buttons but here are some examples of the most used ones.
- 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.
If you set the button to
display: flex, you get access to these properties:
Note that the above assume
flex-directionis set to
row(the default value). If it's set to
columnthen in the above diagram
When having text and image (or icon or description) you can make use of