🆘
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-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
Last modified 1yr ago