Button

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

button

<button>submit</button>

Create a <button> tag. Default button styles are set in _global.scss.

<a href="#"><button type="button">button text</button><a>

Create a <button type="button"> tag, and wrap it inside <a> tags. Default button styles are set in _global.scss.

<input type="submit" value="submit" />

Create a <input type="button"> tag. Default input button styles are set in _global.scss.

evo-button

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

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

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

A variation of button that styles the <a> tag. experimental

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

disabled

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

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

Width Utility

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

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

<input type="submit" 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 type="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 type="button" class="color-20 box-color-20">submit</button></a>

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