Shortcode for CTA Button not working

Hey there

I’m new to Hugo development. I checked out some examples online and the button doesn’t display as it should. Here is my code in button.html which is in the layouts/shortcodes folder

{{ $_hugo_config := `{ "version": 1 }` }}
<a {{ with .Get "href"}} href="{{.}}" target="_blank" {{ end }} class="btn btn-default">
  {{ $icon := .Get "icon" }}
  {{ $iconposition := .Get "icon-position" }}
  {{ if ($icon) }}
    {{ if or (not ($iconposition)) (eq $iconposition "left") }}
  <i class="{{$icon}}"></i>
    {{ end }}
  {{ end }}
  {{ .Inner }}
  {{ if and ($icon) (eq $iconposition "right")}}
  <i class="{{$icon}}"></i>
  {{ end }}

and here is the code in my ‘’ file

{{% button href="" %}}Example{{% /button %}}

I also tried this

{{< button href="" >}}Example{{< /button >}}

If it helps, I am using the Ananke theme.

Any help would be appreciated. Thanks!


Here’s how it renders:

Screenshot 2020-07-16 at 12.34.12

Please be more specific.

Hey @jmooring. Edited the query and included a screenshot. Thanks!

When describing a problem there is a desired result and the acutal result. You have shown us the actual result.

What HTML do you expect to be rendered?

I got the sample code from this example

Here the button looks like this:

Screenshot 2020-07-16 at 15.09.48

Mine is rendering with just plain text and not a CTA-type button.

This is CSS issue, not a Hugo issue. You need to style the anchor element (<a>) using the relevant class selectors.

1 Like

I will try this out and get back to you. Thanks for your help!