C and S Design.
Search Friendly Programming and Design


Using CSS to style links as buttons

Making your links look and act like form buttons is usually a job for using javascript DHTML effects and an image swapping script using the OnMouseDown, OnMouseUp events, and if you want rollovers, you will need to add in OnMouseOut, OnMouseOver events into the script. All this code is going to be in every link on your pages, adding a large chunk of overhead to the download times for each page if you have more than 6 - 10 links on your pages.

For Example;
<a href="URI" onMouseUp="swap_button('up')" onMouseDown="swap_button('down')" onMouseOut="swap_button('out')" onMouseOver="swap_button('over')">Anchor Text</a>
Added to this is the need to pre-load the images (which doesn't always work correctly) and to test the script in every browser.

However you can have a similar effect with a bit of CSS styling applied to your links and simply swapping border styles for the :active pseudo class and setting the display property to block. This needs to be done this way as the 'A' element is an inline element so will only expand to the content, by setting it to block it will then allow the links to expand to the width of the parent container.


Valid HTML 4.01! Valid CSS! copyright © C and S Design 2004 - 2005
Website Design and SE Friendly Coding C and S Design