Button Ideas - Colour is the Key

Following the recent series of tutorials on Changing your Buttons, here are a few Button Style ideas to show you how the different setting options can work with each other…

It will really make a difference to the final look of your site if the colours you use for your buttons work well with your existing website design. Using a chosen colour scheme to create continuity throughout a design is a style used by many website builders. The easiest way is to pick out some colours from the ones on your site. They don’t have to be the most prominent colours, they could be colours used in small, subtle parts of the design or they could be a slightly different shade of a prominent colour. However you choose your button colour scheme, try to avoid colours, which will clash and so could dominate the pages too strongly. You want your buttons to stand out but you don’t want them to be hijacking your visitors attention away from your page content!

The Ideas below are all for Vertical Buttons, Size 90-95%, Narrow Height, default Position and Spacing. If you'd like to see some Horizontal ideas, leave a comment below.

Clean Line

A button with no background colour and simply a thick or extra thick line set on the left side only can look very clean and simple and work well to subtly introduce a clean text page title.
Border – Select Thick under Left, select None under all others.
Font – Verdana, size 12, align Left with Narrow Indent.
Rollover Colour - Remove all background colours under “Rollover Colour” by deleting the code in the Hex Code windows on both Normal and Rollover Colour.
Rollover Font – Choose two striking, fairly dark colours, set one on Normal and one on Rollover. Choose Bold and Underline for Normal Font and Bold and Italic for Rollover.
Rollover Border – Using the same two striking colours as used for the Font, set the colours in the opposite order so the border lines and font colours alternate with the different colours opposite each other.

3D Full Border

This 3D button shows the animation very clearly and so adds some great movement and animation to your website design.
Under Border – Choose thin or medium on ALL and choose a fairly light border colour and copy the hex code as you will need this in a minute.
Font – Verdana, size 11, centre aligned.
Rollover Colour, choose a darker colour for Normal and paste the code used for the lighter border colour under Rollover Colour.
Rollover Font – Under Normal, copy and paste the Hex code used for the lighter Normal Rollover Colour and for Rollover, copy and paste the Hex code used for the darker Rollover Colour so it contrasts well with the background colours. Bold for Normal. Bold + Italic for Rollover.
Rollover border - choose “Out” for Normal Border Type. The border colour should already be the lighter one selected under Border. Paste the darker colour Hex code under Rollover Border (you should still have it copied from the last option) and choose “In” under Type.

Ridge & Groove Professional

Slightly more subtle animation. Works well for professional, corporate sites.
Border – Thin, medium or thick borders on All work equally well with this button, the thicker the border the more pronounced the animation.
Font – Tahoma, size 12, Centre aligned.
Rollover Colour - choose a light colour such as light Gray for Normal and a dark colour for Rollover and copy the Hex code.
Rollover Font - paste the copied Hex code for the dark colour under Normal and select the same light colour (light gray) for Rollover to get a good contrast. Choose Bold for Normal and Italic for Rollover.
Rollover border - choose “Ridge” for Normal Border Type and use a slightly darker shade of the colour you used for Normal under “Rollover Colour” (Mid Gray). Select “Groove “ for Rollover Border Type and set the border colour the same lighter colour you used for Normal under “Rollover Colour” (light Gray). Again copy and paste the Hex code to match it exactly.

Rounded Borders

Your editor offers the option to round off the corners of your buttons rather than having them square but unfortunately at present this option does not work with Internet Explorer. The rounded corner tool uses the very latest technology and may NOT show in older browsers like Internet Explorer. We'll just have to wait till Microsoft catches up! We recommend FireFox in which this option does work - but remember ... a high percentage of your visitors probably use Internet Explorer.
To set rounded Corners, Click the Bar and tick which corners you want to appear rounded then select the amount of radius you want from Sharp to Maximum.


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');