Shortcode for CTA Button not working

support
1

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 }}
</a>

and here is the code in my ‘index.md’ file

{{% button href="https://example.com/" %}}Example{{% /button %}}

I also tried this

{{< button href="https://example.com/" >}}Example{{< /button >}}

If it helps, I am using the Ananke theme.

Any help would be appreciated. Thanks!

EDIT:

Here’s how it renders:

Screenshot 2020-07-16 at 12.34.12

2

Please be more specific.

3

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

4

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?

5

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.

6

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

1 Like
7

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