Tales includes modular HTML & CSS components you may find useful when developing a child theme. This page covers the button class.

---

The class button can be applied to elements like a and input. Buttons inherit the link color styles from the theme customizer.

<a class="button" href="/">Home</a>

Home

input elements with the attribute type="submit" automatically inherit the button style so no class is required.

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

Alternate button styles exist for varied design options. Simply add the modifier class button--primary or button--link.

<button class="button">Normal</button>
<button class="button button--primary">Primary</button>
<button class="button button--link">Link</button>

Normal Primary Link

Modify the button size with button--large and button--small classes.

<button class="button">Normal</button>
<button class="button button--large">Large</button>
<button class="button button--small">Small</button>

Normal Large Small

---

And that's buttons!

See Forms for a guide to form markup.