Template:CS button

Button

What this does

Renders a link styled as a button using TemplateStyles (loaded from CS button/styles.css). Supports alignment (left/center/right), an optional mobile full-width mode, and an optional custom width on desktop. If neither link nor url is provided, the template outputs a non-link, button-like span as a visual fallback.

Parameters

• link – Optional. Internal page to link to (e.g., CS/Self-help book summaries). If present, it takes precedence over url.
• url – Optional. Absolute URL for external destinations (e.g., https://example.com).
• text – Optional. Button label. Default: Button.

 You can include symbols, e.g., See more > to show a single chevron.

• align – Optional. One of left (default), center, right. Controls the container alignment.
• mobile – Optional. When set to full, yes, true, 1, or block, the button becomes 100% width on small screens (per the stylesheet’s media query).
• width – Optional. Desktop width of the button wrapper (e.g., 320px, 24em, 60%). Defaults to the stylesheet’s width (278px).

 On mobile, if mobile=full is used, the mobile rule overrides to full width.

Examples

Basic (internal link):

{{CS button
 | link=CS/Self-help book summaries
 | text=See more
}}

External link:

{{CS button
 | url=https://example.com/self-help
 | text=Browse self-help
}}

Center aligned:

{{CS button
 | link=CS/Self-help book summaries
 | text=See more
 | align=center
}}

Mobile full-width (desktop uses default width):

{{CS button
 | link=CS/Self-help book summaries
 | text=See more
 | mobile=full
}}

Wider on desktop (still full on mobile):

{{CS button
 | link=CS/Self-help book summaries
 | text=See more
 | width=320px
 | mobile=full
}}

Percentage width on desktop:

{{CS button
 | link=CS/Self-help book summaries
 | text=See more
 | width=60%
}}

Non-link fallback (no navigation):

{{CS button
 | text=Coming soon
}}

Add a chevron (arrow) to the label:

{{CS button
 | link=CS/Self-help book summaries
 | text=See more >
}}

Combine alignment, width, and mobile:

{{CS button
 | link=CS/Self-help book summaries
 | text=Explore summaries >
 | align=right
 | width=320px
 | mobile=full
}}

Notes

• Use either link (internal) or url (external). If both are given, link wins.
• TemplateStyles must be available at CS button/styles.css.
• The template relies on ParserFunctions (#if, #switch, lc). Ensure that extension is enabled.
• Keep template calls flush-left (avoid leading spaces) to prevent MediaWiki from rendering a preformatted block around the output.

Troubleshooting

• I see a big grey box / monospace text. You likely started a line with a space, which triggers preformatted output. Remove leading spaces and purge the page.
• Styles aren’t applying. Check that the stylesheet page uses the “Sanitized CSS” content model and that is present at the top.
• Mobile full-width doesn’t activate. Confirm mobile=full (or accepted synonyms) and that your viewport is under the stylesheet’s breakpoint.