2.0 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
This configuration allows to add attributes to all inline- and block-level
elements with a simple syntax, turning any link into a button. Add the
following lines to mkdocs.yml:
markdown_extensions:
- attr_list
See additional configuration options:
Usage
Adding buttons
In order to render a link as a button, suffix it with curly braces and add the
#!css .md-button class selector to it. The button will receive the selected
primary color and accent color if active.
Example:
[Don't click me](#){ .md-button }
Result:
Don't click me{ .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 #!css .md-button and
#!css .md-button--primary CSS class selectors.
Example:
[Don't click me](#){ .md-button .md-button--primary }
Result:
Don't click me{ .md-button .md-button--primary }
Adding icon buttons
Of course, icons can be added to all types of buttons by using the icon syntax together with any valid icon shortcode, which can be easily found with a few keystrokes through the icon search.
Example:
[Send :fontawesome-solid-paper-plane:](#){ .md-button .md-button--primary }
Result:
Send :fontawesome-solid-paper-plane:{ .md-button .md-button--primary }