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:
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:
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: