Link Button

This shortcode styles a link as a button.

This shortcode takes the following parameters:

• type: This specifies the type of styling to use, one of primary or secondary.
  • Use primary styling for a button that performs the primary action in the page. This styling is bold and eye catching and should be reserved for a call to action or any use case where having the user press this button is the primary goal of the page.
  • Use secondary styling for all other buttons. This styling is calmer and blends well into the page content.
• url: The URL that this link button opens when clicked.
  • External links (links that start with http or https) open in a new browser tab.
  • All other links open within the current browser tab by default.
• text: The text displayed in the button.
  • If this text is long, it may wrap on smaller devices.
  • This wrapping is not pleasing and should be avoided, so keep the text for these buttons short.
• tooltip: An optional tooltip to display when the user hovers over the button.
• margin: An optional margin around the button specified using standard CSS margin syntax if you want to override the button’s margin.
  • The default margin is “0 0 20px 0”, which provides 0 margin around every edge other than the bottom, which has 20 pixels of margin.

For layout within your content, link buttons display as inline block elements and provide bottom margin. This means that a single link button will display nicely on its own line (with content separated above and below) and multiple link buttons next to each other will flow left-to-right as expected.

Examples

The example below uses primary styling, so it appears bold. Its URL is external to this site, so it opens in a new browser tab.

{{< jhdocs-link-button type="primary" url="https://jackhenry.dev/portal/" margin="0 0 40px 0" text="Sign up for a developer account" tooltip="This button helps you sign up for a developer account, or to log into an existing developer account" >}}

Here is the rendered result of this markdown:

The example below uses secondary styling, so it appears calmer. Its URL is external to this site, so it opens in a new browser tab.

{{< jhdocs-link-button type="secondary" url="https://jackhenry.com/" text="Learn more about Jack Henry" tooltip="Learn more about Jack Henry and the products and services we offer to serve the financial industry" >}}

Here is the rendered result of this markdown:

The example below uses secondary styling, so it appears calmer. Its URL is internal to this site, so it opens in the same browser tab.

{{< jhdocs-link-button type="secondary" url="../../../getting-started/" text="Get started with jhDocs" tooltip="Learn how to get started with jhDocs" >}}

Here is the rendered result of this markdown: