Buttons and links

A button is the thing you want a visitor to click: Contact us, Download the brochure, See all products. In ClickWhale a button is an element of its own, and it always lives inside a Button bar: the box that holds one or more buttons side by side.

You don't have to make the button bar yourself. Drop a Button into a Column and ClickWhale creates the bar around it. Drop a second Button into that same bar and you get two buttons next to each other.

Adding one

Select the Column (or Container, or Div) where the button should go, then drag Button onto the page or double-click it in the list.

A settings dialog opens straight away, asking for the two things a button can't do without: which display set gives it its look, and where it goes. Buttons, menus and forms are the only three elements that do this. Everything else you configure afterwards in the right-hand pane.

To type the label, click the button in the editor and type. It's a plain text field, not the rich text editor, so there's no formatting to apply. The look comes entirely from styling.

Where the button goes

Link action is the same list you'll find on images and grid cells:

Always use Open page for a page on your own site. You pick the page from a list, and the link keeps working if you rename the page or move it to another folder later. A typed address doesn't. It breaks quietly, and you find out from a visitor.

For an external address, type it in full, including https://.

Several buttons together

Add a second Button while the first one's Button bar is selected and the two sit side by side. The bar is what controls their arrangement: its Content alignment setting decides whether they run across or stack and whether they sit left, centre or right, and its Gap setting decides the space between them.

Use the ← → buttons on a selected button's toolbar to swap their order.

So: style the button, arrange the bar. Padding and colour belong on the button; spacing between buttons belongs on the bar.

Styling, and the three states

A button has the full styling range: background, border, border radius, box shadow, gap, padding and text. It is also one of the few elements with three states:

Set a hover state on every button: it's how a visitor knows the thing is clickable at all. A common, safe pattern is a slightly darker background on hover and nothing else. If the button's background is a function colour, pick the hover from the Darker or lighter row under that slot in the colour picker: the hover then keeps matching when you change the button's colour. See The colour palette.

Change the state you're editing with the state selector at the top of the Display settings pane. See Styling elements with the Display settings panel.

Why your new button already looks styled

The first button you add gets your site's default button display set attached automatically, so it arrives looking like the rest of the site instead of looking like nothing.

You can pick a different set from the Display this element as … dropdown at any time, and ClickWhale won't override your choice afterwards. The automatic pick only ever happens once, when the element is created.

If you want all your buttons to change, edit the set rather than the buttons. See Reusable styling with display sets.

Links inside a paragraph

A button is for a deliberate action. For a link in the middle of a sentence, use the link tool in the text editor instead: select the words, click the link icon, and choose where it goes. That's covered in Writing and formatting text.

The two are styled separately. A link inside text takes its colour from your typography styling, not from your button set.

Common issues