Complete your Website Redesign with New Buttons!

You can check out the collection of tutorials we’ve created on using the new Template Designer. “Click here” to view those for the Header Designer and “Click here” for the tutorials on using the Button Designer. 

Redesigning your Buttons.
 

Log in to your control panel and go to Step 2 (Style). Here you can access both the new header designer and your buttons designer. Click on the buttons area to access the designer.

There are 9 ways in which you can change your buttons: – Type, Position, Size, Spacing, Border and Font and then there’s the animation side of things.....; Rollover Colour, Rollover Font and Rollover Border.
The Rollover options will determine how your buttons change whenever a visitor hovers over or clicks one of your buttons. With each option, click the Show Me button to view the changes you have made. 

Start by selecting the best Position, Size and Spacing for your buttons. 

You’ll need to decide whether vertical or horizontal buttons will work best on your new design. If you have more than 6 buttons you should choose vertical as there just won’t be room for your buttons to run across the top. 

When you come to the border and font options, you’ll need to start thinking about colour. If you’ve already used the new template designer, you’ll recognise the clever colour spectrum and colour picker functions but the buttons designer is even more helpful! Here you have a colour palette, which is where the system has picked out a selection of colours for you including those already being used and other similar colours and basic colours which work well together.  

Let’s Get Animated! 

Once you’ve chosen your colour scheme, you can start working on the animation side of things, which is determined by the Rollover options. The way in which the colours and fonts for your buttons change when you hover or click with a mouse can add both life and impact to your website so play around with the options to create the right animation to suit your website. 

In the Rollover options you’ll be designing the look of your buttons for both the Normal and the Rollover views. Normal is the main button style, which is visible as standard without any influence from your website visitors. Rollover is the interactive button style, which appears once a visitor hovers their mouse over your buttons or clicks one of them.

Under Rollover Colour you set the background colours for both Normal and Rollover. Choose colours which work well with your overall website design but which also contrast well so that the button selected is shown clearly.

Rollover Font shows the alternating options for both font colour and format. The options include: Bold, Italic and Underline. So, for instance; you could set your Normal Font to be just Bold but for your Rollover setting, you could set the font to change to Bold and Italic or Italic and Underlined or even all three! 

Your Rollover Colours and Fonts need to work well together so try to choose contrasting colours. For instance; a dark coloured font will not show up well at all on a dark coloured background. Opposite settings of dark and light work well here, i.e. a dark background and a light font for Normal and a 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 the Out / In or Ridge & Groove options. Again the Border colours can dramatically affect the animation here so play around with contrasting borders for the best results. 

Click here for some example Button Designs and to see how to create some great effects with the right combinations of settings and colours.

Find out more about us

We have been in business since 2003. Back when the founders of Facebook were still in college, we were writing code and helping our users create great websites.

Affordable business website design

If you need help, why not check out our huge selection of videos, step-by-step guides and knowledge papers.

UKs most trusted

We have helped many thousands of our customers create great looking websites. Take a look at a few examples, created using our website builder.