mkdocs-material/docs/reference/buttons.md

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 }