Button Deluxe

🐺🔥🔬 WolfspyreLabs Shortcodes
buttondeluxe outputs a more styled button component.

buttondeluxe

Output a styled button component.
Can be used to highlight a primary action.
It has the following:

href OR relref

The URL or RELREF of the link
target ( Default: _blank ) The target of the link.
- To open in the same window, _self.
- Use _blank to open in a new window.
textColor ( Default: neutral ) specify the tailwind color of the text.
textDark ( Default: neutral-400 ) specify the tailwind color of the text when contrast polarity is reversed.
size ( Default: md ) The size option.

Value	Padding: X	Padding: Y	Margin
xs	1	1	0
sm	2	1.5	0.25
md	3	2	0.25
lg	3.5	3	0.5
xl	4	3.5	0.5
xxl	5	4	0.75

Example:

Size	Example code	Example Button
xs	`{{< buttondeluxe href="#button" size="xs" target="_self" >}} Look Ma! No Clicky! {{< /buttondeluxe >}}`	Look Ma! No Clicky!
sm	`{{< buttondeluxe href="#button" size="sm" target="_self" >}} Look Ma! No Clicky! {{< /buttondeluxe >}}`	Look Ma! No Clicky!
md	`{{< buttondeluxe href="#button" target="_self" >}} Look Ma! No Clicky! {{< /buttondeluxe >}}`	Look Ma! No Clicky!
lg	`{{< buttondeluxe href="#button" size="lg" target="_self" >}} Look Ma! No Clicky! {{< /buttondeluxe >}}`	Look Ma! No Clicky!
xl	`{{< buttondeluxe href="#button" size="xl" target="_self" >}} Look Ma! No Clicky! {{< /buttondeluxe >}}`	Look Ma! No Clicky!
xxl	`{{< buttondeluxe href="#button" size="xxl" target="_self" >}} Look Ma! No Clicky! {{< /buttondeluxe >}}`	Look Ma! No Clicky!

{{< buttondeluxe href="#button" target="_self" >}}
Look Ma! No Clicky!
{{< /buttondeluxe >}}

{{< buttondeluxe href="#button" size="lg" target="_self" >}}
Look Ma! No Clicky!
{{< /buttondeluxe >}}

{{< buttondeluxe href="#button" size="xl" target="_self" >}}
Look Ma! No Clicky!
{{< /buttondeluxe >}}

{{< buttondeluxe href="#button" size="xxl" target="_self" >}}
Look Ma! No Clicky!
{{< /buttondeluxe >}}