Button

A styled, linkable button. Tabs: Content, Styling, Animations, Advanced.

💡 Web dev tip: a link goes somewhere, a button does something

Use a link (<a href>) to navigate to another page or section, and a button (<button>) to trigger an action such as submit, open or toggle. Choosing the right one gives you correct keyboard behaviour, screen-reader semantics and SEO for free — a <div> dressed up as a button has none of that. Give this element a link to make it an anchor, or leave it empty for a real button. MDN: the button element

Live demo

▶ See the Button live on the demos site — an interactive example you can click through.

Content

Option	Notes
Button Label	The text shown on the button
Button Link	Destination URL
Open Link in New Window	On/Off
Button Icon	Optional icon
Icon Position	Before Label, After Label

Styling

Option	Choices
Button Style	A set of visual presets (image-picker)
Button Size	Size presets (image-picker)
Button Width	Full Width, or Custom
Custom Width	Used when Button Width = Custom
Alignment	Left, Center, Right
Button State	Active, Disabled
Hover Animation	A motion effect from the shared Hover Animations library — the built-in effects (Lift, Grow, Shine sweep, Glow pulse, Tilt, …) plus your own from Theme Settings → Components → Hover Animations. Box Presets pick from the same list.
Margin	Spacing

Screenshots — styles, sizes & hover

Capture each Button Style, Button Size, and Hover Animation variant. Suggested files: button-style-1, button-size-lg, button-hover-grow in static/img/shortcodes/.