Buttons
Buttons
| Class(es) | Example | Note |
|---|---|---|
button | Default | Used most often |
button tiny | Tiny | Used sparingly |
button large | Large | Used sparingly |
button expanded | Expanded | Used in sidebars |
button unstyled | Unstyled | No arrow |
button disabled | Disabled | Gray and no hover state |
button white | Used against colored background. Ensure there's enough color contrast. | |
button downloadable | Download | For PDFs and other files that are set to download |
Things that look like buttons, but aren't
| Class or tag | Example | Note |
|---|---|---|
<input type="submit"> | Used in forms and search bars | |
<input type="file"> | Used in forms | |
<button class="clear-form"> | Used in forms |
When should you use a button?
If it's a call to action, use a button.
If it's not, just use a plain text link.
When in doubt, use a text link. View examples.
Which HTML element should you use?
Most use cases:
- Use an
<a>element
On forms:
- Search, Submit: use an
<input>element - Clear form, Delete: use a
<button>element that looks like a text link
How do I make a link into a button in Drupal?
- Write the content of your page
- Select the "Source" button in the editor UI, which will show how the content looks in HTML
- Find the
<a>element for the link you want to turn into a button - Add
class="button"to the<a>tag, like this:<a href="https://search.lib.ncsu.edu/" class="button">Search</a>
Coming soon: HTML and CSS examples
Updated