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.
- Log in to your website's dashboard.
- Click on 'Edit design' in the top left.
- Click on 'Buttons’' under the menu that appears. Here you are able to select different styles, fonts, font sizes and colours for the buttons on your website.
Styles and Borders
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.
Fonts, Sizing and Colouring
The next dropdown called Button allows you to select the font you would like to use for the buttons across your website. There are a large number of fonts to choose from and each can have their size and colour customized to your liking.
Using the colour pallets available in the menu you can select the text colour and the background colour of the button.
Note: The height of your buttons will be determined by the font size you have selected . The smaller the font size the smaller the button will resize itself to.
How to adjust the text size of your Buttons for mobile
1. Flick over to the Mobile tab. Edit the size of your Button text as desired, and Save changes.
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 Edit Design button (top left of your Rocketspark Dashboard or Editor).
By default, the Width and Alignment settings are not 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.