1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-12-21 03:45:57 +01:00
mkdocs-material/docs/reference/buttons.md

85 lines
2.1 KiB
Markdown
Raw Normal View History

2020-07-27 12:32:24 +02:00
---
icon: material/button-cursor
2020-07-27 12:32:24 +02:00
---
# 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
2021-10-03 18:02:59 +02:00
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`:
2020-07-27 12:32:24 +02:00
``` yaml
markdown_extensions:
- attr_list
```
2021-10-03 18:02:59 +02:00
See additional configuration options:
- [Attribute Lists]
2021-10-03 18:02:59 +02:00
[Attribute Lists]: ../setup/extensions/python-markdown.md#attribute-lists
2020-07-27 12:32:24 +02:00
## Usage
### Adding buttons
2021-10-03 18:02:59 +02:00
In order to render a link as a button, suffix it with curly braces and add the
2021-10-10 12:19:14 +02:00
`.md-button` class selector to it. The button will receive the selected
2021-10-03 18:02:59 +02:00
[primary color] and [accent color] if active.
2020-07-27 12:32:24 +02:00
``` markdown title="Button"
2021-10-10 12:19:14 +02:00
[Subscribe to our newsletter](#){ .md-button }
2020-07-27 12:32:24 +02:00
```
<div class="result" markdown>
2020-07-27 12:32:24 +02:00
2021-10-10 12:19:14 +02:00
[Subscribe to our newsletter][Demo]{ .md-button }
2020-07-27 12:32:24 +02:00
</div>
2021-10-03 18:02:59 +02:00
[primary color]: ../setup/changing-the-colors.md#primary-color
2024-01-28 09:51:25 +01:00
[accent color]: ../setup/changing-the-colors.md#accent-color
2021-10-10 12:19:14 +02:00
[Demo]: javascript:alert$.next("Demo")
2020-07-27 12:32:24 +02:00
### Adding primary buttons
2021-10-03 18:02:59 +02:00
If you want to display a filled, primary button (like on the [landing page]
2021-10-10 12:19:14 +02:00
of Material for MkDocs), add both, the `.md-button` and `.md-button--primary`
CSS class selectors.
2020-07-27 12:32:24 +02:00
``` markdown title="Button, primary"
2021-10-10 12:19:14 +02:00
[Subscribe to our newsletter](#){ .md-button .md-button--primary }
2020-07-27 12:32:24 +02:00
```
<div class="result" markdown>
2020-07-27 12:32:24 +02:00
2021-10-10 12:19:14 +02:00
[Subscribe to our newsletter][Demo]{ .md-button .md-button--primary }
2020-07-27 12:32:24 +02:00
</div>
2021-10-03 18:02:59 +02:00
[landing page]: ../index.md
2020-07-27 12:32:24 +02:00
### Adding icon buttons
2021-10-03 18:02:59 +02:00
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].
2020-07-27 12:32:24 +02:00
``` markdown title="Button with icon"
[Send :fontawesome-solid-paper-plane:](#){ .md-button }
2020-07-27 12:32:24 +02:00
```
<div class="result" markdown>
[Send :fontawesome-solid-paper-plane:][Demo]{ .md-button }
2020-07-27 12:32:24 +02:00
</div>
2020-07-27 12:32:24 +02:00
2021-10-03 18:02:59 +02:00
[icon syntax]: icons-emojis.md#using-icons
[icon search]: icons-emojis.md#search