Button Icon

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

evo-button

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

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

<a href="#" class="evo-button">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 _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 .evo-color-9 and .box-color-9 and .evo-color-1-bg classes for styling. Default button styles are set in _variables.scss.

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

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