Button Size

Use a button size or utility to adjust button size, padding, or box line.

Button Text Size

The easiest way to change the size of a button is to adjust the text size. Simply add a text class such as .evo-text-6 to the <button> tag. Text sizes 1-10 are demonstrated below.

<button class="evo-text-10">submit</button>

<button class="evo-text-9">submit</button>

<button class="evo-text-8">submit</button>

<button class="evo-text-7">submit</button>

<button class="evo-text-6">submit</button>

<button class="evo-text-5">submit</button>

<button class="evo-text-4">submit</button>

<button class="evo-text-3">submit</button>

<button class="evo-text-2">submit</button>

<button class="evo-text-1">submit</button>

Button Size Utility

A button size utility sets a text size percentage relative to the base text size of a standard button. Create a <button> tag and apply the .evo-button class for structure. Add a button size class such as .button-size-small. Default button styles are set in _variables.scss.

<button class="button-size-large">submit</button>

<button class="button-size-medium">submit</button>

<button class="button-size-small">submit</button>

Button Padding Utility

A button padding utility has padding that is slightly wider than tall. Create a <button> tag and apply the .evo-button class for structure. Add a button padding class such as .button-padding-thin. Default button styles are set in _variables.scss.

<button class="button-padding-thick">submit</button>

<button class="button-padding-medium">submit</button>

<button class="button-padding-thin">submit</button>

<button class="button-padding-none">submit</button>

Button Box Utility

A button box utility also has a matching hover state. Create a <button> tag and apply the .evo-button class for structure. Add a button box class such as .button-box-thin. Default button styles are set in _variables.scss.

<button class="button-box-thick">submit</button>

<button class="button-box-medium">submit</button>

<button class="button-box-thin">submit</button>

<button class="button-box-none">submit</button>

Button Utility Example

Create a <button> tag and apply the .evo-button class for structure. Add .button-size-small and .button-padding-none and .button-box-thin classes for styling. Default button styles are set in _variables.scss.

<button class="button-size-small button-padding-none button-box-thin text-uppercase">submit</button>

<button class="button-size-small button-padding-none button-box-thin text-uppercase">submit</button>