# Common Button States and Styles

{% hint style="info" %}
There are infinite possible styles for buttons but here are some examples of the most used ones.
{% endhint %}

### Border Width&#x20;

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FpY8l5mpK8gWHPZq7ZQ0r%2Fborder%20widths.png?alt=media\&token=27a628bc-4c67-4c8f-946b-b96267d6c5b9)

### Border Style

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FnZnEszYq4CH7rk56kQwW%2Fborders.png?alt=media\&token=db63dd88-c45d-4027-8f34-bc26adc6b354)

### Border Radius

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FVACWPm6LSCe5Ju8wYU56%2Fborder%20radius.png?alt=media\&token=b2d59fe1-c3b3-43c4-ade2-e2eeedcf7552)

### Background Color

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FKW0LgCMOVlvMsuBKa7hz%2Fbackground%20colors.png?alt=media\&token=b6f64b5a-d5ea-4d24-a90f-1218a13c221b)

### Padding

* 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.

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FYv7wZiWON7x7iTmzFcRQ%2Fpadding.png?alt=media\&token=644a5c13-7e10-49d7-9447-38175354fde9)

## States

### Hover

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.&#x20;

### Selected

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.&#x20;

## Content Display

If you set the button to `display: flex`, you get access to these properties:

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FwGjsGOXkaeodbM76mU6z%2Fflex.png?alt=media\&token=0e7994c7-178d-4707-a0c5-fe55dcca5705)

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`

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FCrzV1vGZgv0YSdfLPVjP%2Fspace%20between%20and%20space%20around.png?alt=media\&token=97e2228a-c466-4e14-96e4-b9616b9cb148)
