1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
---
icon: material/button-cursor
---
# 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`:
``` yaml
markdown_extensions:
- attr_list
```
See additional configuration options:
- [Attribute Lists]
[Attribute Lists]: ../setup/extensions/python-markdown.md#attribute-lists
## Usage
### Adding buttons
In order to render a link as a button, suffix it with curly braces and add the
`.md-button` class selector to it. The button will receive the selected
[primary color] and [accent color] if active.
``` markdown title="Button"
[Subscribe to our newsletter](#){ .md-button }
```
<div class="result" markdown>
[Subscribe to our newsletter][Demo]{ .md-button }
</div>
[primary color]: ../setup/changing-the-colors.md#primary-color
[accent color]: ../setup/changing-the-colors.md#accent-color
[Demo]: javascript:alert$.next("Demo")
### 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 class selectors.
``` markdown title="Button, primary"
[Subscribe to our newsletter](#){ .md-button .md-button--primary }
```
<div class="result" markdown>
[Subscribe to our newsletter][Demo]{ .md-button .md-button--primary }
</div>
[landing page]: ../index.md
### 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 our [icon search].
``` markdown title="Button with icon"
[Send :fontawesome-solid-paper-plane:](#){ .md-button }
```
<div class="result" markdown>
[Send :fontawesome-solid-paper-plane:][Demo]{ .md-button }
</div>
[icon syntax]: icons-emojis.md#using-icons
[icon search]: icons-emojis.md#search
|
