Button Ideas - Colour is the Key
Content taken from older UK website builder blog posts
Button Ideas - Colour is the Key
Please note this article was first published in 11 Nov 2009. Its content may now be out of date. We recommend taking a look at more recent website building blog posts or check out our comprehensive support pages. If you are looking for information on our 14 day free website builder trial we have a large number of webpages that guide you throug the process.
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!
Web Button Ideas
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.
Please remember, this article was first published 11/11/2009. The content may be out of date and you cannot post comments any more. Please check out our new blog.
Want to learn more ?
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.
Latest blog posts
Evolving Your Website Using Background Videos
These days, websites without background videos run the risk of appearing old-fashioned. Even dinosaurish,
There’s nothing wrong with dinosaurs, or with looking like one. Dinosaurs are cool. Unless they’re chasing you of course.
But our new background videos have landed, exploded and changed the game. They have wiped out the old standards for beautiful websites, and have replaced them with a new standard that will leave all other websites looking like fossils.
Luckily, both our existing clients and our new ones have access to this brilliant new feature we’ve introduced, and we’d like to share its benefits with you today.
Bold, Italics, Capitals – When To Call On Your Superheroes
A superhero is only super because he or she stands out amongst the crowd. If we were a planet of flying, teleporting, time-freezing super-strong aliens, then we wouldn’t think there was anything super about us. When it comes to using formatting methods such as bold, italics, capitals or centering, all of these little text-enhancing superheroes will only stand out if they are used sparingly, in the right place, and when absolutely necessary…
Do I Need To Add Testimonials To My Website?
Reviews, testimonials, recommendations – we all seek reassurance in them. We might even skip past the good ones just to see if there are any bad ones.Other people are sources of information for us. They can tell us whether this product or service is actually any good or not. Reading their testimonials builds trust in your business.
Should I Buy Multiple Domain Names For My Website?
If I have multiple domain names, will my website rank better on the search engines? Will I be more likely to draw in extra traffic? Will my website become a supercharged powerhouse bursting with domain names that will become a magnet for new business? The answer might not be quite as positive as you would expect, but hopefully we can answer your questions during this article…
How To Choose The Best Domain Name For Your Website
Choosing a domain name for your new business may not be as simple as you think. Most people just use their company name, but unless your branding is well recognised, this may work against you…
Is It Possible For A Website To Look Too Good?
Is it possible for your business website to look too good? Too polished? Too slick? Too posh?
Perhaps it depends on how slick and posh you already are.
Stop Collecting Email Addresses On Your Website…Unless You Have Permission!
“If a customer fills out a form and adds their email address, what can I do with it?” This is a terrible question, asked by non-GDPR compliant cavemen and cavewoman who still think it’s OK to treat other people’s info as if it’s their own…
How Do I Send An Email Newsletter?
You are building a GDPR-friendly email list, and now you want to start sending out newsletters, the professional way. Where do you start?
Selling Isn’t A Dirty Word. Selling Is Serving!
“Don’t sell your product. Solve their problems.” Mark Cuban’s wise words sum up the art of selling – it is about helping people, fixing problems and improving the lives of others…
Don’t Be A Clown. Get A Professional Email Address For Your Business.
iF we’re honest, not many people will accuse you of clownery for not having a proper business email address. But they might not call you professional either…
A Website To Grow Your Business, In Just Over A Week
Building a professional website to grow your business should be easy and seamless from start to end. We offer to build your business website for you, in four easy steps…
Is Your Website Secure? Upgrade To HTTPS ASAP!
When July 2018 hits, Google Chrome will make sure a strong warning will pop up on any website that has not yet updated from “http” to “https”. The warning will include something along the lines of “Website Not Secure”. Here’s how to avoid it.