Change how every button looks

To restyle every button of your theme, you change the button's variants once in the Blocks panel, not each button on each page. The same steps work for links, headings, form fields and the other blocks the panel lists. How block variants and formats work explains variants, states and formats.

Change a variant

1. Open your project in Fantasma.
2. In the icon rail, click the shapes icon, Blocks.
3. Under Actions, click Button. The button's variants appear on the canvas as columns, with their states as rows.
4. Under Variants at the bottom of the panel, click the variant you want to change, such as Filled.
5. In the right sidebar, change its settings, such as Background under Colors.

Every button that uses the variant changes on every page as you go. Your Ghost site shows the change after you publish the theme to Ghost, or download it and upload it in Ghost Admin.

From a page, you can also select a button, click its name at the top of the right sidebar, and select Edit block. The Blocks panel opens on the variant and format that button uses.

Change the hover look

1. In the Blocks panel, under Variants, click the arrow next to the variant to see its states.
2. Click Hover. The right sidebar shows the settings a state can change.
3. Change Background, Text color, Border, Shadow, Opacity, Transform or Transition. Transform moves, scales or turns the button, and Transition sets how fast it changes.

On your site, buttons take this look while the pointer is over them.

If a variant has no Hover row yet, click + State under the rows on the canvas. It adds the next missing state, Hover, then Pressed, then Focus, to the selected variant.

Change one format only

A change to a variant reaches every format of the block, so a small and a large button stay alike. To change the variant in one format only, such as a smaller corner radius for Small buttons:

1. Under Formats, click the format, such as Small.
2. On the canvas, click the button in the column of the variant and the row of the state you want to change.
3. In the right sidebar, turn on Change only at Small.
4. Change the settings.

To go back to the values the formats share, click Use shared values below that switch.

Add a variant

1. In the Blocks panel, click + next to Variants. A copy of the selected variant, or of the last one when none is selected, appears as a new column on the canvas.
2. On the canvas, click the new variant's name to select it.
3. Click the name again and type a new name.
4. Change its settings in the right sidebar.

To remove a variant, point at its name on the canvas and click ×. Blocks that used it take the first variant. A message with Undo appears.

Add a format

1. In the Blocks panel, click + next to Formats.
2. Select a size, such as Large, or Custom format to start from a copy of Default. The new format appears under Formats.
3. Click the new format.
4. On the canvas, select any button.
5. In the right sidebar, change its padding and text size.

Padding and text size belong to the format, so this changes every button in the new format and no other.

Pick a variant and a format on a page

1. On a page, select the button.
2. At the top of the right sidebar, pick a Variant.
3. If the block has two formats, turn on the switch named after the second one, such as Small. With three or more, pick one in the Format row.

Changing a button's colors or borders in the right sidebar of a page changes that button only. To bring back its variant's look, click its name at the top of the right sidebar and select Reset to, followed by the variant's name, such as Reset to Filled.