Welcome back to Changing Your Buttons - Part 3

This is Part 3 of the tutorial looking at the new upgraded editing system for the buttons on your navigation bar. The Button Wizard has recently been updated to offer a host of new and exciting features and options. These options will allow you to design new, fun, animated, colour co-ordinated, dynamic buttons to grab visitors attentions and help guide them through the pages of your website. If you've taken the time to build your website and have got the pages looking great, then it seems only right to make the doors to those pages look inviting too!

If you missed parts 1 and 2, click on them here.
Changing Buttons Part 1
Changing Buttons Part 2

Now for the clever creative bit!

In the last tutorial we looked at the size, positioning and spacing of your buttons. Now we can get started on the colourful creative stuff. This is where the before (Normal) and after (Rollover) background colours, borders and fonts you choose will make your buttons come alive.

The Colour Picker

Once you’ve chosen your colours, selecting them couldn’t be easier with the new Colour Picker! Several of the customisable features of the button editor use the reason8 colour picker, which offers you a choice of more than 6million colours! To use the picker, simply click inside the colour box and a colour picker window will open. The sliding bar on the left selects the broad colour ranges and the bigger colour spectrum box on the left allows you to select the exact colour you want. Your choice will be shown in the top right selection window. 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). Once you’re happy, simply close the window.

Quick Choices from the Colour Palette

To save you time and make things even easier for you, there's also a quick colour palette to choose colours from. Just click on “Choose from Palette 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.

The first colour settings you need to choose are for your border. You can choose whether you want to show a border line on any one or all four sides of your button. You’ll see, options for Left, Top, Bottom and Right or All and you can choose a border thickness of; none, thin, medium, thick or extra thick. You don’t have to have a line on all four sides and you can create some interesting buttons by experimenting with the options here.


Rollover – All the options here are for Normal and Rollover. Normal is the primary button style and Rollover is the new button style, which the button will animate to once a visitor has either hovered their mouse over your buttons or clicked one of them.

Under Rollover Colour you can set the two backgrounds you wish your button to change from and to. Rollover Font shows both the Font colours and the styles you can choose from, which include Bold, Italic and Underline. Rollover Colour and Font need to work well together so try to choose contrasting colours. For instant and dark red text will no show up on a black background. Opposite settings of Dark and light work well here, i.e. dark background and light font for Normal and light background and dark front for Rollover.

Rollover Border – Here you can choose from a simple line where only the colours will change animatedly or for more 3d animation choose Out / In or Ridge & Groove.
Again the Border colours can dramatically affect the animation here so play around with contrasting borders for the best results.

We’ll look at some Buttons Ideas in the next tutorial to show you how all these settings can work with each other and to show some of the exciting effects, which can be created with the right choices of settings and colours. 

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
This blog is running version
(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','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');