Button
The button
shortcode displays a clickable button with adjustable color, title and icon.
Usage
Once the button is clicked, it opens another browser tab for the given URL.
{{% button href="https://gohugo.io/" icon="download" %}}Get Hugo{{% /button %}}
Parameter
Name | Optional | Default | Notes |
---|---|---|---|
href | yes | <empty> | The destination URL for the button. If this parameter is not set, the button will do nothing but is still displayed as clickable. |
style | yes | transparent |
The color scheme used to paint the button. - by severity: info , note , tip , warning - by brand color: primary , secondary - by color: blue , green , grey , orange , red - by special color: default , transparent |
icon | yes | see notes | Font Awesome icon name set to the left of the title. Depending on the style there may be a default icon. Any given value will overwrite the default. - for severity styles: a nice matching icon for the severity - for all other colors: <empty> If you want no icon for a severity style, you have to set this parameter to " " (a non empty string filled with spaces) |
iconposition | yes | left |
Places the icon to the left or right of the title. |
<content> | yes | see notes | Arbitray text for the button title. Depending on the style there may be a default title. Any given value will overwrite the default. - for severity styles: the matching title for the severity - for all other colors: <empty> If you want no title for a severity style, you have to set this parameter to " " (a non empty string filled with spaces) |
Examples
Style
by Severity
Get Hugo Get Hugo Get Hugo Get Hugo
by Brand Colors
by Color
Get Hugo Get Hugo Get Hugo Get Hugo Get Hugo