Button

Basic buttons for <button>, <input type="button">, or <a> tags, along with inverse button.

evo-button-gray-[relative]

Create a <button>, input type="button">, or <a> tag and apply the evo-button-gray-[relative] class. Default styles are set in _evo_variables.scss.

<button class="evo-button-gray">submit</button>

<a href="#" class="evo-button-gray">submit</a>

<input type="button" value="submit" class="evo-button" />

disabled

<button class="disabled">submit</button>

Create a <button> tag and apply the disabled class. Default button styles are set in _evo_variables.scss.

Width Utility

<button class="width-full">submit</button>

Add a width-full class to make a button span the full width of its container.

<input type="button" value="submit" class="width-auto" />

Add a width-auto class to collapse the button to the width of its text content.

Button Color Example

Create a <button> tag and apply the evo-button class for structure. Add color-9 and box-color-9 and color-1-bg classes for styling. Default button styles are set in _evo_variables.scss.

<a href="#"><button class="color-20 box-color-20">submit</button></a>

<a href="#"><button class="gray-0 box-color-14 color-17-bg">submit</button></a>