mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-12-18 10:25:58 +01:00
86 lines
2.2 KiB
Markdown
86 lines
2.2 KiB
Markdown
---
|
|
template: overrides/main.html
|
|
icon: material/gesture-tap-button
|
|
---
|
|
|
|
# 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
|