How to add new button styles and manage button styles (delete styles, more settings)

You can add multiple button styles and save these styles to use throughout your Rocketspark website. If you have not already, learn how to add a button block to your website.

How to add a new button style

Go to Change design on the top left of your editor
Go to "Button styles"
All existing button styles will appear here.
At the top of the settings, you click "Add new style"
A sidebar will appear for the new button style (there will be a horizontal bar at the top for you to click and drag if you wish to position this sidebar for better visibility)
Give your new button style a label that makes it easy to identify (such as "Primary button", "Bold button", "Form button", etc.
In the "style" settings, you can:
1. Change the shape of the button (background fill, shape of button, etc.
2. You can change the button size (standard or compact)
3. Change the background and text colour
4. Change the border colour and border width
5. Change the border radius (square shape, rounded shape)
6. Change the hover over background, text and border colour
Toggle to "text" settings
In the text settings, you can change:
1. The font and text size
2. The button text size for mobile devices
3. The casing (As entered, ALL CAPITAL LETTERS, Capital letters at start of sentence, lowercase)
4. The letter spacing and line height of the text
5. Once you are happy with the new button style, click "add style"
6. This new style will now become available for you to choose when you go to edit a button on your website- learn more about how to add a button

How to delete a button style

If you wish to delete a button style:

First, click the trash icon next to the button you wish to delete in the "change design" settings
If you are already using this button style on your website, you will need to choose a replacement button to use with this being in use
Choose the new button style to replace the style you are deleting
Click "save changes and replace button style" or cancel changes

How to edit an existing button style

You can either edit a button style within a button block while you are editing a button, or edit the button within the change design settings.

Please note that if you are editing a button style that has been used throughout the website, all buttons using this style will change with any edits you make. If you would prefer for those existing buttons to not update, it would be best to add a brand new button style.

In the button styles change design settings, click the edit pencil next to a button style you wish to edit.
A sidebar will appear for you to make any changes to the button style.
Once you are happy with the edits made, make sure you click "Update"

How to re-arrange the order button styles is shown in the dropdown

When you are editing a button block, the list of styles available will appear in a dropdown. You can change the order in which the button styles are displayed, so that your most used button style appears at the top of the list when you are editing a button block.

In the button styles change design settings, click and drag the arrow icon next to a favourite style - drag upwards to move this button style higher on your dropdown list - or drag down to appear lower on your list

More settings for button styles

You will have more button settings for better customisation.

In the button styles change design settings, scroll right to the bottom of these settings to find "More button settings"
If you have an ecomerce store, you can choose the primary and secondary button style used by clicking the dropdown and selecting a saved button style.
If you have a blog on your website, you can choose which button style is used by clicking the dropdown and selecting a saved style.

Please note: the blog button is for the blog main page, when you have multiple blogs 'Load more' option. There is no way to add buttons to a blog.
You will find the width and alignment settings
To make your Text always centred in the button for all the buttons on your website, check this tick box under Width & alignment
To make the Button length adjust text for all the buttons on your website, check this tick box under Width & alignment

You can also check both boxes to achieve the full effect of these button-style customisations.
Set a button style for buttons in a menu header.