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>
submit
<a href="#" class="evo-button-gray">submit</a>
<input type="button" value="submit" class="evo-button" />
evo-button-inverse
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-inverse">submit</button>
submit
<a href="#" class="evo-button-inverse">submit</a>
<input type="button" value="submit" class="evo-button-inverse" />
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>