Optimised Buttons

[Aegean]

I received an email from an AD member last week asking me if it was possible to create a coloured button on his website that contained optimised text, without using images. This can be done easily using CSS3, so I thought I'd post it here just in case its of help to anyone else.

If you have site visitors who use older browsers that do not support CSS3, you can use a fallback image.

Firstly, put the following in your sites CSS file:

/* Overall CSS Button Style */
 .button {
     background: #777;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
     box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
     cursor: pointer;
     display: inline-block;
     overflow: hidden;
     padding: 1px;
     vertical-align: middle;
     }
 .button span {
     border-top: 1px solid rgba(255, 255, 255, 0.25);
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     color: #fff;
     display: block;
     font: bold 12px 'Arial', sans-serif;
     padding: 6px 12px;
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
     }
     
/* CSS Button States */
 .button:hover {
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(1, rgba(0, 0, 0, 0.1)));
     background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));
     text-decoration: none;
     }
 .button:active {
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, transparent), color-stop(1, rgba(0, 0, 0, 0.2)));
     background-image: -moz-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.2));
     }
 .button:active span {
     border-top-color: rgba(0, 0, 0, 0.2);
     }
     
/* Colours and Sizes */
 .button.black { background-color: #252a2a; }
 .button.blue { background-color: #3792c6; }
 .button.red { background-color: #cc2222; }
 .button.green { background-color: #69a846; }
 .button.brown { background-color: #b6761a; }
 .button.selected { background-color: #569334; }
 .button.large span { font-size: 16px;  padding: 6px 14px; }
 .button.small span { font-size: 11px;  padding: 4px 8px; }

Then in the code of your page, use the following for your button, changing the colour etc as you need to:

<a href='http://www.yourlink.co.uk' class='button blue'><span>Optimised Text Here</span></a>

Or with a size and padding:

<a href=''http://www.yourlink.co.uk' class='button large blue'><span>Optimised Text Here</span></a>

If you use WP this may be built into your template, so you won't need it, but if you use HTML this will let you insert your optimised anchor text into your button with no images.

 

[Aegean]

Thanks for putting up the preview seemly, I forgot to illustrate what I was talking about!

 

[fish]

if you are using WP, there's a fab plugin called jshortcodes which perform the same job (and others) very nicely.

 

[Annife]

Looking really great! Thanks for the post.

Im using little different, but mine have some issues in IE.

 

[devilsrefugee]

Thanks for sharing