# Buttons

Zensical 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 your configuration:

```toml
[project.markdown_extensions]
attr_list = {}
```

```yaml
markdown_extensions:
  - attr_list
```

See additional configuration options:

- [Attribute Lists](<https://zensical.org/docs/compatibility/markdown/python-markdown/#attribute-lists>)

## Usage

### Add a button

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](<https://zensical.org/docs/setup/colors/#primary-color>) and [accent color](<https://zensical.org/docs/setup/colors/#accent-color>) if active.

Button

```markdown
[Subscribe to our newsletter](#){ .md-button }
```

[Subscribe to our newsletter](<javascript:alert$.next(%22Demo%22)>)

### Add a primary button

If you want to display a filled, primary button (like on the [landing page](<https://zensical.org>) of Zensical), add both, the `.md-button` and `.md-button--primary` CSS class selectors.

Button, primary

```markdown
[Subscribe to our newsletter](#){ .md-button .md-button--primary }
```

[Subscribe to our newsletter](<javascript:alert$.next(%22Demo%22)>)

### Add a button with an icon

Of course, icons can be added to all types of buttons by using the [icon syntax](<https://zensical.org/docs/authoring/icons-emojis/#use-icons>) together with any valid [icon shortcode](<https://zensical.org/docs/authoring/icons-emojis/#included-icon-sets>):

Button with icon

```markdown
[Send :fontawesome-solid-paper-plane:](#){ .md-button }
```