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
I am an incoming PhD student in Computer Science at Case Western Reserve University, where I am fortunate to be advised by Prof. Erman Ayday. Prior to joining CWRU, I earned my M.S. in Electrical and Computer Engineering from Georgia Tech and my bachelor’s degree in Computer Science from Beijing Jiaotong University.
My research interests lie in the area of Trustworthy AI, with a focus on enhancing the reasoning capabilities of Large Language Models (LLMs) and ensuring their safety alignment.
Please feel free to reach out!