Docs

Button

A link styled as a button, using your Design System button style.

On this page

The Button widget is a link that looks like a button: “Book a consultation”, “See our services”, “Download the brochure”. Its look comes from the buttons in your Design System, so every button on the site stays consistent, and you can still change a single button on the Design tab.

Three buttons in a row: a green primary button with an arrow, an outlined button and a text link with an arrow
The Primary, Outline and Text link styles.

Add a button

  1. Insert it

    Open Insert in the left panel, find Button under Basic (or type button in Search widgets) and click it or drag it onto the canvas.

  2. Type the Text, or double-click the button on the canvas to edit it there. In Link, paste a URL, type a page name to pick a page of your site, or use a path (/contact/), #anchor, mailto: or tel:.

  3. Choose the style

    Pick a Style (Primary, Secondary, Outline, Ghost or Text link) and a Size. Add an Icon and a Hover effect if you like.

To change how Primary and the other styles look everywhere, edit them in the Design System: in the editor, open Styles → Buttons. See Buttons.

Open a popup or a panel

A button's Link can do more than open a page:

  • #urmi-popup:open:62 opens the popup with ID 62 (use your popup's ID). See Open from a link.
  • #contact-panel opens an Off-Canvas panel with that link anchor.
  • #pricing scrolls to a section or Menu Anchor named pricing.

Settings

Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing). Fields that support dynamic tags can show data such as a post URL (see Dynamic tags).

Content tab

Button
SettingWhat it does
TextThe button label. Keep it short and specific, like “Book a consultation”. Supports dynamic tags.
LinkWhere the button goes: a URL, a page of your site (type to search), #anchor, mailto: or tel:. Link options adds Open in new tab and Add nofollow. Without a link the button is plain text, not a link. Supports dynamic tags.
StyleWhich button style to use. Primary and the other styles follow the buttons in your Design System. Options: Primary, Secondary, Outline, Ghost, Text link. Default: Primary.
SizeSmall, medium, large or extra large. Options: S, M, L, XL. Default: M.
IconAn optional icon next to the text.
Icon positionPuts the icon before or after the text. Options: Before, After. Default: After. Shown when an icon is chosen.
Icon spacingSpace between the icon and the text.
AlignmentAligns the button. Full width stretches it across its container. Options: Left, Center, Right, Full width. Per device.
Hover effectAn animation when the pointer is over the button. Options: None, Lift, Grow, Shrink, Pulse, Shine, Nudge icon, Fill from left, Underline, Text roll.
Button IDAn ID on the button link, for example to track clicks in your analytics tool.

Design tab

Button
SettingWhat it does
TypographyText style or font, size, weight and spacing of the button text.
Normal › Text colorColor of the text.
Normal › BackgroundBackground of the button: a color, a gradient or an image.
Normal › BorderBorder style, width and color of the button.
Normal › ShadowShadow of the button.
Hover › Text colorColor of the text on hover.
Hover › BackgroundBackground of the button on hover: a color, a gradient or an image.
Hover › Border colorColor of the border on hover.
Hover › ShadowShadow of the button on hover.
Border radiusRounds the corners of the button. Per device.
PaddingSpace inside the button. Per device.
Icon sizeSize of the icon. Per device.
Shared Design sections

Every element also has these sections at the end of the Design tab.

SectionWhat it does
Spacing & positionMargin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position.
Background & borderBackground, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows.
MaskCrops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks.

Behaviour tab

Behaviour sections

The Behaviour tab is the same for every element.

SectionWhat it does
Anchor & classesAn Anchor ID for #links and your own CSS classes.
AnimationsEntrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects.
Motion & effectsA simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning.
Scroll & mouse effectsMovement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt).
VisibilityHide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility.
ConditionsShow the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions.
InteractionsShow, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions.
AttributesCustom HTML attributes for this element. See Anchor, classes & attributes.

Tips

  • Say what happens. “Book a consultation” works better than “Click here”, for everyone and for screen reader users who list the links on a page.
  • One main action. Use Primary for the most important button in a section and Outline or Text link for the others.
  • Full width on phones. Set Alignment to Full width on mobile for an easy tap target.
  • Tracking. Give the button a Button ID to count its clicks in your analytics tool.
Buttons in the Design SystemSet the look of every button on the site. Call to ActionA promo box with an image, title, text and buttons. Open a popup from a linkLinks that open, close or toggle popups. StatesStyle hover, focus and active states.