Buttons
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
Right
{{< 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 >}}
External Link with New Tab
{{< 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-labelsupport- Keyboard focus indicators
- High contrast focus rings
- Disabled state handling
Nicolas Fougere is a technology leader with experience helping global industrial organizations accelerate innovation through digital engineering and transformation. As a Senior Portfolio Manager at Dassault Systèmes, he works with manufacturers and technology leaders to develop strategies around virtual twins, simulation, systems engineering, and AI.
Before joining the private sector, Nicolas contributed to scientific research supporting NASA and the European Space Agency’s Rosetta mission and authored numerous peer-reviewed publications. He holds advanced engineering and scientific degrees from the University of Michigan.
Nicolas is passionate about connecting technology, business strategy, and customer success to help organizations solve complex challenges, build high-performing teams, and create lasting business value.