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 text-size-6 to the <button type="button"> tag. Text sizes 1-10 are demonstrated below.

<button type="button" class="text-size-10">button text</button>

<button type="button" class="text-size-9">button text</button>

<button type="button" class="text-size-8">button text</button>

<button type="button" class="text-size-7">button text</button>

<button type="button" class="text-size-6">button text</button>

<button type="button" class="text-size-5">button text</button>

<button type="button" class="text-size-4">button text</button>

<button type="button" class="text-size-3">button text</button>

<button type="button" class="text-size-2">button text</button>

<button type="button" class="text-size-1">button text</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 type="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 _evo_variables.scss.

<button type="button" class="button-size-large">button text</button>

<button type="button" class="button-size-medium">button text</button>

<button type="button" class="button-size-small">button text</button>

Button Padding Utility

A button padding utility has padding that is slightly wider than tall. Create a <button type="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 _evo_variables.scss.

<button type="button" class="button-padding-thick">button text</button>

<button type="button" class="button-padding-medium">button text</button>

<button type="button" class="button-padding-thin">button text</button>

<button type="button" class="button-padding-none">button text</button>

Button Box Utility

A button box utility also has a matching hover state. Create a <button type="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 _evo_variables.scss.

<button type="button" class="button-box-thick">button text</button>

<button type="button" class="button-box-medium">button text</button>

<button type="button" class="button-box-thin">button text</button>

<button type="button" class="button-box-none">button text</button>

Button Utility Example

<a href="#"><button type="button" class="ghost-color-to-solid-color button-size-small button-padding-none button-box-thin text-uppercase box-square">button text</button></a>

Create a <button type="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 _evo_variables.scss.