Button
Arrr! Pirrrates
Fello' pirrates, be awarrre some stuff may not work fer us in this trrranslat'n. Like table of rrramblings, see'ng Merrrmaids, do'ng math or chemistrrry and stuff.
Th' button shorrrtcode displays a click'ble button wit' adjust'ble color, title an' ay'con.
Usage
While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shorrrtcode from yer own partials.
{{% button href="https://gohugo.io/" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="warning" ay'con="dragon" %}}Get Cap'n Hugo{{% /button %}}
{{ partial "shortcodes/button.html" (dict
"context" .
"href" "https://gohugo.io/"
"content" "Get Hugo"
)}}
{{ partial "shortcodes/button.html" (dict
"context" .
"href" "https://gohugo.io/"
"style" "warning"
"icon" "dragon"
"content" "Get Hugo"
)}}
Once th' button be clicked, it opens another browser tab fer th' given URL.
Parameter
| Name | Default | Notes |
|---|---|---|
| href | <empty> | Th' destinat'n URL fer th' button. If this parameter be not set, th' button will do noth'n but be still displayed as click'ble. |
| style | transparent |
Th' color scheme used t' paint th' button. - by severity: info, note, tip, warning- by brand color: primary, secondary- by color: blue, green, grey, orange, red- by special color: default, transparent |
| ay'con | see notes | Font Awesome ay'con name set t' th' left o' th' title. Depend'n on th' style there may be a default ay'con. Any given value will overwrite th' default. - fer severity styles: a nice match'n ay'con fer th' severity - fer all other colors: <empty> If ye want no ay'con fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces) |
| iconposit'n | left |
Places th' ay'con t' th' left or right o' th' title. |
| <content> | see notes | Arbitray text fer th' button title. Depend'n on th' style there may be a default title. Any given value will overwrite th' default. - fer severity styles: th' match'n title fer th' severity - fer all other colors: <empty> If ye want no title fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces) |
Examples
Style
By Severity
{{% button href="https://gohugo.io/" style="info" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="note" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="tip" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="warning" %}}Get Cap'n Hugo{{% /button %}}
Get Cap'n Hugo Get Cap'n Hugo Get Cap'n Hugo Get Cap'n Hugo
By Brand Colors
{{% button href="https://gohugo.io/" style="primary" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="secondary" %}}Get Cap'n Hugo{{% /button %}}
By Color
{{% button href="https://gohugo.io/" style="blue" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="green" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="grey" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="orange" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="red" %}}Get Cap'n Hugo{{% /button %}}
Get Cap'n Hugo Get Cap'n Hugo Get Cap'n Hugo Get Cap'n Hugo Get Cap'n Hugo
By Special Color
{{% button href="https://gohugo.io/" style="default" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="transparent" %}}Get Cap'n Hugo{{% /button %}}
Ay'con
T' th' Left
{{% button href="https://gohugo.io/" ay'con="download" %}}Get Cap'n Hugo{{% /button %}}
T' th' Right
{{% button href="https://gohugo.io/" ay'con="download" iconposit'n="right" %}}Get Cap'n Hugo{{% /button %}}
Override fer Severity
{{% button href="https://gohugo.io/" ay'con="dragon" style="warning" %}}Get Cap'n Hugo{{% /button %}}
Other
Severity Style wit' all Defaults
{{% button href="https://gohugo.io/" style="tip" %}}{{% /button %}}