How do I change the style of my buttons?

Customising the buttons on your website is a great way to draw the attention of customers to other areas of your website, or points of interest on your web page. To customise the buttons on your website, there is a design menu to allow full customisation of fonts, colours and sizing. Here are the steps on how to access the button design menu.

If you don't have any buttons added yet. Firstly, learn how to add buttons by following our How to add buttons to my website guide.

1. Log in to your website's Dashboard.
2. Click on 'Change Design' in the top left.
   
   

3. Click on "Button styles" under the menu that appears. Here you are able to select different styles, fonts, font sizes and colours for the buttons on your website.
   
   

4. Choose to create a new button style or edit an existing button style by clicking the edit icon.
   

   

Button label:

First off, give your button a label that makes it easy to identify what style it is when you go to select this for your button blocks (e.g. "Main button", "Blue and white button"

Shape and size

There are 8 different button styles selectable for both Standard and Compact buttons. Once you have selected a style you can choose the colour of the border and how large you would like it to be.

Text, border and background colours

• You can change the background colour by clicking the background icon and selecting a colour.
• You can change the text colour by clicking the text colour icon and selecting a colour.
• You can change the border width by clicking the dropdown and selecting the amount of px.
• You can change the border colour by clicking the border colour icon and selecting a colour.
• You can change the border column radius by sliding the vertical line up (for a circular border) or down (for a square border) - or by typing in the field the number you would like.

Hover over colour

You can change the hover over colour (when a visitor hovers over a button, the colours can change)

• Change the background colour that appears when you hover over the button
• Change the text colour that appears when you hover over the button
• Change the border colour that appears when you hover over the button
  

Fonts, text size, and mobile

If you toggle to "Text" settings, you will find more options for the button style

• Click the "text" dropdown to change the button font
• Click the size dropdown to change the text size on desktop
• You can click the mobile font size dropdown to choose what size the text should be
• You can change the casing of the button style (As entered, ALL CAPS, Sentance case, lowercase)
• You can change the letter spacing and the line height for the button text styling.

Button width and alignment:

You have the option to set the width and alignment of your buttons across your website.

To edit your button Width and Alignment click on the Change Design button (top left of your Rocketspark Dashboard or Editor). 

By default, the Width and Alignment settings are ticked. Check the tick box alongside Text always centred in button to activate this setting. If you'd like the button width to adjust to the length of your button text, tick Button length adjusts to text.

See our help guide on Button Width and Alignment for more information. 

Other important guides: