Button

The button shortcode displays a clickable button with adjustable color, title and icon.

Go Hugo Download Magic

Usage

​
{{% button href="https://gohugo.io/" %}}Go Hugo{{% /button %}}
{{% button href="images/magic.gif?download" style="tip" icon="hand-sparkles" %}}Download Magic{{% /button %}}
{{ partial "shortcodes/button.html" (dict
    "page" .
    "href" "https://gohugo.io/"
    "content" "Go Hugo"
)}}
{{ partial "shortcodes/button.html" (dict
  "page" .
  "href" "https://gohugo.io/"
  "style" "tip"
  "icon" "hand-sparkles"
  "content" "Download Magic"
)}}

Parameter

Name Default Notes
href <empty> Either the destination URL for the button or JavaScript code to be executed on click. If this parameter is not set, the button will do nothing but is still displayed as clickable.

- if starting with javascript: all following text will be executed in your browser
- every other string will be interpreted as URL, you can use link effects as well.
type see notes The button type if href is JavaScript. Otherwise the parameter is not used. If the parameter is not given it defaults to button.
borderless false When true, no border will be shown around the button.
hint <empty> Tooltip for the button.
style transparent The style scheme used for the button.

- by severity: caution, important, info, note, tip, warning
- by brand color: primary, secondary, accent
- by color: blue, cyan, green, grey, magenta, orange, red
- by special color: default, transparent, code, link, action, inline

You can also define your own styles.
color see notes The CSS color value to be used. If not set, the chosen color depends on the style. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color
icon 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 styles: <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 left Places the icon to the left or right of the title.
<content> see notes Arbitrary 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 styles: <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

{{% button href="https://gohugo.io/" style="caution" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="important" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="info" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="note" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="tip" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="warning" %}}Get Hugo{{% /button %}}

Get Hugo Get Hugo Get Hugo Get Hugo Get Hugo Get Hugo

By Brand Colors

{{% button href="https://gohugo.io/" style="primary" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="secondary" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="accent" %}}Get Hugo{{% /button %}}

Get Hugo Get Hugo Get Hugo

By Color

{{% button href="https://gohugo.io/" style="blue" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="cyan" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="green" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="grey" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="magenta" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="orange" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="red" %}}Get Hugo{{% /button %}}

Get Hugo Get Hugo Get Hugo Get Hugo Get Hugo Get Hugo Get Hugo

By Special Color

{{% button href="https://gohugo.io/" style="default" %}}Open Link{{% /button %}}
{{% button href="https://gohugo.io/" style="transparent" %}}Open Link{{% /button %}}
{{% button href="https://gohugo.io/" style="code" %}}Open Link{{% /button %}}
{{% button href="https://gohugo.io/" style="link" %}}Open Link{{% /button %}}
{{% button href="https://gohugo.io/" style="action" %}}Open Link{{% /button %}}
{{% button href="https://gohugo.io/" style="inline" %}}Open Link{{% /button %}}

{{% button href="javascript:alert('Some JavaScript')" style="default" %}}Run JavaScript{{% /button %}}
{{% button href="javascript:alert('Some JavaScript')" style="transparent" %}}Run JavaScript{{% /button %}}
{{% button href="javascript:alert('Some JavaScript')" style="code" %}}Run JavaScript{{% /button %}}
{{% button href="javascript:alert('Some JavaScript')" style="link" %}}Run JavaScript{{% /button %}}
{{% button href="javascript:alert('Some JavaScript')" style="action" %}}Run JavaScript{{% /button %}}
{{% button href="javascript:alert('Some JavaScript')" style="inline" %}}Run JavaScript{{% /button %}}

{{% button style="default" %}}Fake Button{{% /button %}}
{{% button style="transparent" %}}Fake Button{{% /button %}}
{{% button style="code" %}}Fake Button{{% /button %}}
{{% button style="link" %}}Fake Button{{% /button %}}
{{% button style="action" %}}Fake Button{{% /button %}}
{{% button style="inline" %}}Fake Button{{% /button %}}

Open Link Open Link Open Link Open Link Open Link Open Link

Fake Button Fake Button Fake Button Fake Button Fake Button Fake Button

Icon

Empty

{{% button href="https://gohugo.io/" icon=" " %}}{{% /button %}}

Only with Hint

Mouse-over the button to see the hint.

{{% button href="https://gohugo.io/" icon="download" hint="Go to Hugo's homepage" %}}{{% /button %}}

To the Left

{{% button href="https://gohugo.io/" icon="download" %}}Get Hugo{{% /button %}}
Get Hugo

To the Right

{{% button href="https://gohugo.io/" icon="download" iconposition="right" %}}Get Hugo{{% /button %}}
Get Hugo

Override for Severity

{{% button href="https://gohugo.io/" icon="dragon" style="warning" %}}Get Hugo{{% /button %}}
Get Hugo

You can use link effects with your href to open the link in a different tab or starting a download.

{{% button href="https://gohugo.io/?target=_blank" %}}Go Hugo{{% /button %}}
{{% button href="images/magic.gif?download" style="tip" icon="hand-sparkles" %}}Download Magic{{% /button %}}

Go Hugo Download Magic

Other

Borderless

{{% button borderless="true" href="https://gohugo.io/" style="primary" %}}Get Hugo{{% /button %}}
{{% button borderless="true" href="https://gohugo.io/" style="default" %}}Get Hugo{{% /button %}}
{{% button borderless="true" href="https://gohugo.io/" style="transparent" %}}Get Hugo{{% /button %}}

Get Hugo Get Hugo Get Hugo

With User-Defined Color, Font Awesome Brand Icon and Markdown Title

{{% button href="https://gohugo.io/" color="fuchsia" icon="fa-fw fab fa-hackerrank" %}}Get **Hugo**{{% /button %}}
Get Hugo

Severity Style with All Defaults

{{% button href="https://gohugo.io/" style="tip" %}}{{% /button %}}
Tip

Button to Internal Page

{{% button href="/index.html" %}}Home{{% /button %}}
Home

Button with JavaScript Action

If your JavaScript action does not change the focus afterwards, make sure to call this.blur() in the end to unselect the button.

{{% button style="primary" icon="bullhorn" href="javascript:alert('Hello world!');this.blur();" %}}Shout it out{{% /button %}}

Button within a form Element

To use native HTML elements in your Markdown, add this in your hugo.toml

[markup.goldmark.renderer]
    unsafe = true
<form action="../../search.html" method="get">
  <input name="search-by-detail" class="search-by" type="search">
  {{% button type="submit" style="secondary" icon="search" %}}Search{{% /button %}}
</form>