Skip to content

Buttons

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

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

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

Last update: February 28, 2022
Created: September 12, 2021
Back to top