How to add side-by-side buttons to your website and customise the style

You can add buttons to your website to allow your users to navigate around your site.

You can also place multiple buttons side-by-side to place two or more buttons in the same block. Think Buy now and Learn more, or Book now and Contact us. Learn the best tips on how to use side-by-side buttons

Each button can have its own look. Pick colour, size, corners, font, casing and hover effect for every button. Save your favourite combinations as reusable styles so you can stay consistent across a whole site and make changes once that update everywhere.

Everything is edited right on the page. Type into the button, set the link and adjust the order in a few clicks. On mobile, buttons stack automatically to stay easy to tap.
 

Step one: Add a button block

Step two: Add text, button link and alignment

Step three: Edit button style

Step one: Add a button block

1. Log in to your Dashboard and go to Editor
2. Go to the page where you want to add a button
3. Add a stack
4. Click Add Block and select the Button block
   
5. The button block will open the button editor for you to add text/link/style
   

Step two: Add text, button link and alignment

1. Change text: Click inside the button area to add the text that you want to display on the button.
   
    
2. Add link: To add a link destination, click either the link icon at the bottom of the button or the link icon in the toolbar.
   
    
3. Select where you want the button to link to.
   • Select a page in the dropdown (link to an existing page - you can add more pages via "Manage Pages" from your dashboard)
   • You can link to an existing blog created on your website
   • You can link to a product if you have a store on your website
   • You can link to an external website (add in the full URL https://....)
     
      
4. Click Save Link
   
5. You can change the button alignment by clicking the icon
   
6. Choose for the button to be left-aligned (1st icon), centred (middle icon) or right-aligned (3rd icon) 
   
    
7. You can add multiple buttons next to each other by clicking the plus icon
   
    
8. Give the new button a name and add a link destination - click the trash icon to delete the second button

Step three: Edit button style

1. You can change the style of your button (text colour, size, font, background colour, border, etc).
    
2. If you have multiple buttons side by side, it is best to give each button a different style, with the bolder style as the main button you want customers to click. 
   
    
3. Click the circle icon for options
   
4. You can choose from your list of existing button styles used throughout your website by clicking the options found - a tick icon will represent the style currently used.
   
   
    
5. Click "edit styles" to change the style of an existing option in your dropdown. 
   If you wish to add a brand new button style (not already listed), you will need to do this within the "change design" button settings. Learn more
   
    
6. A side window will appear for you to edit a button style - click the edit pencil next to any option.
   
   Please note that if you change a button style, and this style is used in multiple areas of your website, any changes you make will apply to all other buttons using that same style. 
   
    
7. In the "style" settings, you can change:
   1. The label (name that appears in the dropdown for identification)
   2. The shape and size
   3. The background and text colour
   4. The border colour and border width
   5. The border radius (square shape, rounded shape)
   6. The hover over background, text and border colour
      
      
       
   7. Toggle to "text" settings
      
   8. 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. If you made any changes to a button style, click "update" or click "cancel" to remove changes
         
      6. Once you are happy with the changes, click Save. If you made no changes, click cancel.
         
      7. Once you are happy with your button block, make sure to save the overall changes.
         

If you wish to add, delete, or re-order the button styles, you can do this within the "Change design" settings. Learn more. 

OTHER BUTTON OPTIONS:

How to set up a telephone number using a button:
If you select the "website" option and enter tel: plus your phone number e.g. tel:0800762538 the button will call that phone number when touched on a smartphone only.  Make sure tel: has a lower-case 't' for this little trick to work.

How to set up an email using a button:
There are two options for using a button to go directly to an email.  This is also known as a 'mailto'.  Click on the 'website' option and type in 'mailto:' and then your email address.  Here's an example of what this should look like: mailto:name@company.com

Please contact support@rocketspark.com if you have any questions.