1.9 KiB
| template |
|---|
| overrides/main.html |
Buttons
Material for MkDocs provides dedicated styles for primary and secondary buttons
that can be added to any link, label or button element. This is especially
useful for documents or landing pages with dedicated call-to-actions.
Configuration
Attribute List
The Attribute List extension, which is part of the standard Markdown
library, allows to add HTML attributes and CSS classes to Markdown elements,
and can be enabled via mkdocs.yml
markdown_extensions:
- attr_list
Usage
Adding buttons
When the Attribute List extension is enabled, any clickable element can be
converted into a button by adding the .md-button CSS class, which will receive
the selected primary color.
Example:
[Subscribe to our mailing list](#){ .md-button }
Result:
Subscribe to our mailing list{ .md-button }
Adding primary buttons
If you want to display a filled, primary button (like on the landing page
of Material for MkDocs), add both the .md-button and .md-button--primary
CSS classes.
Example:
[Subscribe to our mailing list](#){ .md-button .md-button--primary }
Result:
Subscribe to our mailing list{ .md-button .md-button--primary }
Adding icon buttons
Of course, icons can be added to both types of buttons by using the regular icon syntax and referencing a valid path to any icon bundled with the theme.
Example:
[Submit :fontawesome-solid-paper-plane:](#){ .md-button .md-button--primary }
Result:
Submit :fontawesome-solid-paper-plane:{ .md-button .md-button--primary }