Buttons

· 3 min read
courses

A modern, customizable button shortcode with gradient styling, icons, and smart link handling.

Basic Usage

The above buttons are created with:

{{< button url="/contact" >}}Contact Us{{< /button >}}

{{< button url="https://example.com" new_tab="true" style="secondary" >}}Visit External Site{{< /button >}}

Style Variants

Primary (Default)

{{< button url="#" style="primary" >}}Primary Button{{< /button >}}

Secondary

{{< button url="#" style="secondary" >}}Secondary Button{{< /button >}}

Outline

{{< button url="#" style="outline" >}}Outline Button{{< /button >}}

Ghost

{{< button url="#" style="ghost" >}}Ghost Button{{< /button >}}

Sizes

Small

Medium (Default)

Large

Extra Large

{{< button url="#" size="sm" >}}Small Button{{< /button >}}
{{< button url="#" size="md" >}}Medium Button{{< /button >}}
{{< button url="#" size="lg" >}}Large Button{{< /button >}}
{{< button url="#" size="xl" >}}Extra Large{{< /button >}}

Alignment

Left (Default)

Center

{{< button url="#" align="left" >}}Left Aligned{{< /button >}}
{{< button url="#" align="center" >}}Center Aligned{{< /button >}}
{{< button url="#" align="right" >}}Right Aligned{{< /button >}}

With Icons

Icon Before Text

Icon After Text

{{< button url="#" icon="arrow-down-tray" >}}Download{{< /button >}}
{{< button url="#" icon="arrow-right" icon_position="right" >}}Continue{{< /button >}}

Rounded Corners

Small Radius

Medium Radius (Default)

Large Radius

Pill Shape

{{< button url="#" rounded="sm" >}}Small Radius{{< /button >}}
{{< button url="#" rounded="md" >}}Medium Radius{{< /button >}}
{{< button url="#" rounded="lg" >}}Large Radius{{< /button >}}
{{< button url="#" rounded="full" >}}Pill Button{{< /button >}}

Advanced Examples

Call-to-Action Button

{{< button url="/signup" style="primary" size="lg" align="center" icon="rocket-launch" >}}Get Started Today{{< /button >}}
{{< button url="https://github.com/hugo-blox/kit" new_tab="true" style="outline" icon="arrow-top-right-on-square" icon_position="right" >}}View on GitHub{{< /button >}}

Download Button

{{< button url="/files/document.pdf" style="secondary" icon="document-arrow-down" rounded="full" >}}Download PDF{{< /button >}}

Parameters

Parameter Type Default Description
url string # Required. Button destination URL (internal or external)
text string Inner content Button text (overrides shortcode content)
new_tab boolean false Whether to open link in new tab
style string primary Button style: primary, secondary, outline, ghost
size string md Button size: sm, md, lg, xl
align string left Button alignment: left, center, right
icon string - Icon name from Hero Icons
icon_position string left Icon position: left, right
rounded string md Border radius: sm, md, lg, xl, full
disabled boolean false Whether button should be disabled

Security Features

The button shortcode automatically handles security for external links:

  • External links get rel="noreferrer" attribute
  • External links opening in new tab get rel="noopener noreferrer"
  • Internal links opening in new tab get rel="noopener"

This ensures safe navigation while maintaining functionality.

Accessibility

The button shortcode includes built-in accessibility features:

  • Proper role="button" attribute
  • aria-label support
  • Keyboard focus indicators
  • High contrast focus rings
  • Disabled state handling
Ahmed Massoud
Authors
Teaching Assistant | Researcher | Bio-Scientific Designer
Ahmed Massoud is a molecular biology graduate, ranked first in his major, and currently a full-time Teaching Assistant at the Faculty of Science, Alamein International University. He is also an ASRT MSc Research Scholar under the Scientists for Next Generation (SNG) Program. Alongside his academic background, he has a strong passion for bio-scientific illustration and visual science communication, aiming to simplify complex biological concepts through clear, accurate, and publication-ready figures.