Creating great menu Buttons

Creating great menu Buttons


One request that we hear often is "can I change my menu buttons?". As part of the updates we are making to Reason8, we thought we would create a simple and fun way to help you to change the navigation buttons on your site. We hope you have fun and we look forward to seeing great buttons that are styled to fit with your website design. This quick knowledge paper guides you through the basics of the new "Button Builder".

To start: go to STEP2 of your control panel and click the [Menu Button] link.

fragrance powder and granules oils

Choosing a button

Either choose a button from your favourites (automatically created as you experiment ) or select one from our library of samples.

Click [SELECT] and start editing your button. (Remember the style you choose at this point is just a starting point and you can completely edit and customise it).

Customising your buttons

The button system uses the editing screen below and you can see how your buttons look as you make changes to them.


There are 9 ways that you can change the buttons – just click the little icons and you can start making changes straight away.

There are a number of features that are worth mentioning in more detail.

Vertical vs Horizontal menu buttons and multi-level buttons

The button editor will allow you to add horizontal buttons to your website however there are three things that you should keep in mind if you want horizontal buttons:

  • Will all your buttons fit ?

Unlike vertical buttons, you only have a limited amount of space for horizontal buttons and if you have too many buttons then they will either look too cramped or will overflow into a second row. Overflow buttons may cause unexpected results. We ask you to choose the number of buttons that you want in your menu bar. 

If your button text  is very long then the button text will wrap and you may end up with different sized buttons that might look odd.

  • Do they match  with your website layout?

Your website may have been designed for vertical buttons and horizontal buttons may not fit. Remember, we can make changes to your template for a one off payment of £30

  • Will your content change ?

Horizontal buttons give your content more room to spread out.  This might mean you may have to adjust the formatting to fit this extra pace.

Multi-level buttons

To create multi-level website menu buttons just click the link at the top of the page that says [organise pages].  To find out more about the multi-level system click here

Remember to click the “Show Me“ button.

None of the changes that you make will take effect until you click this button.

fragrance powder and granules oils

The colour picker

Several customisable features use the reason8 colour picker. You can choose from more than 6million colours. Just click a colour and close the window.

fragrance powder and granules oils

To use the picker click inside the colour box and a colour picker window will open. The sliding bar on the left selects the broad colour and the bigger area on the left allows you to select the exact colour you want.

If you already know the special (Hex) colour sequence of the colour you want then you can simply type it into the box below the picker. (remember to prefix the number with a special ‘#’ symbol).

The fast colour pallet chooser.

To save fiddling and make things a bit quicker, we have also included a quick palette. 

fragrance powder and granules oils

Just click this link and it opens up with some pre-chosen colours. We include your main website colours and any colours you have chosen while building your buttons.

fragrance powder and granules oils

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');