Hugo Button shortcode

September 2020 251 2 mins Hugo

Shortcode which shows links as buttons which can be used to emphasize them or as a call for action.

This article was written for Hugo 0.74.

Usage

You configure the link target, set the content of the button and you’re done.

option	effect	optional	default
href	sets the link to an external website	yes	Attachments
relref	sets a link to a page on the current website. If set `href` is ignored	yes
class	optional CSS classes	yes

Example

{{< button relref="/" >}}Get Home{{< /button >}}
{{< button href="https://gohugo.io/" >}}Hugo{{< /button >}}

Get Home Hugo

Code

The shortcode, which is just a stylized <a> element.

1
2
3
4
5
6
7
8
9
{{ $ref := .Get "href" }}
{{ $target := "" }}
{{ with $ref }}
  {{ $target = "_blank" }}
{{ end }}
{{ with .Get "relref" }}
  {{ $ref = relref $ . }}
{{ end }}
<a {{ with $ref }}href="{{.}}" {{ end }} {{ with $target }} target="{{.}}"{{ if eq $target "_blank" }} rel="noreferrer"{{ end }}{{ end }} class="markdown-btn{{ with .Get "class" }} {{ . }}{{ end }}">{{- .Inner | safeHTML -}}</a>

The accompanying SCSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
a.markdown-btn {
  font-size: inherit;
  font-family: inherit;
  color: var(--font-color);
  background-color: var(--md-bg-color-dark);
  border-radius: $border-radius;
  text-align: center;
  padding: 5px 1em 5px 1em;
  text-decoration: none;
  border: none;
  cursor: pointer;

  &:hover,
  &:active {
    text-decoration: none;
    background-color: var(--primary-color);
    color: var(--bg-color);
  }
}

Attachments

button.html.txt
(388b)
button.scss
(408b)

Permalink: //oostens.me/posts/hugo-button-shortcode/
License: The text and content is licensed under CC BY-NC-SA 4.0. All source code I wrote on this page is licensed under The Unlicense; do as you please, I'm not liable nor provide warranty.

Noticed an error in this post? Corrections are appreciated.