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>
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>
And that's buttons!
See Forms for a guide to form markup.