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:

[project.markdown_extensions.attr_list]

markdown_extensions:
  - attr_list

See additional configuration options:

• 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 and accent color if active.

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

Add a primary button¶

If you want to display a filled, primary button (like on the landing page of Zensical), add both, the .md-button and .md-button--primary CSS class selectors.

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

Add a button with an icon¶

Of course, icons can be added to all types of buttons by using the icon syntax together with any valid icon shortcode:

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