diff --git a/layouts/shortcodes/hero-button-secondary.html b/layouts/shortcodes/hero-button-secondary.html
new file mode 100644
index 0000000..b094a69
--- /dev/null
+++ b/layouts/shortcodes/hero-button-secondary.html
@@ -0,0 +1,29 @@
+{{- /*
+Secondary hero button - outlined variant of Hextra's primary hero button.
+It uses Hextra's existing color palette and matches both light and dark modes.
+
+This shortcode is the companion to `hero-button`, designed for secondary actions
+(such as "Learn more") displayed alongside a primary button.
+
+@param {string} link   The link of the button.
+@param {string} text   The text of the button.
+@param {string} style  Optional inline style overrides.
+
+@example {{< hero-button-secondary text="Learn more" link="/docs" >}}
+*/ -}}
+
+{{- $link := .Get "link" -}}
+{{- $text := .Get "text" -}}
+{{- $style := .Get "style" -}}
+
+{{- $external := hasPrefix $link "http" -}}
+{{- $href := cond (hasPrefix $link "/") ($link | relURL) $link -}}
+
+<a
+  href="{{ $href }}"
+  class="not-prose hx:font-medium hx:cursor-pointer hx:px-6 hx:py-3 hx:rounded-full hx:text-center hx:text-primary-600 hx:inline-block hx:bg-transparent hx:border hx:border-gray-200 hx:hover:border-gray-400 hx:focus:outline-hidden hx:focus:ring-4 hx:focus:ring-primary-300 hx:dark:text-white hx:dark:border-neutral-800 hx:dark:hover:border-neutral-500 hx:dark:focus:ring-primary-800 hx:transition-all hx:ease-in hx:duration-200"
+  {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
+  {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
+>
+  {{- $text -}}
+</a>