Schubert's Blog

A biker and technology enthusiast's
view of the world

CSS Getting links to look like buttons

On Mapze.com, I've had places where I wanted to give the user a HTML link and a button, side-by-side, but they look nothing alike. For example, at the bottom of the 'Create a New Event' page, the user can click a link that took them back to their home page or a button to add a new event. Although, through the magic of CSS, it is possible to get the both of them to look identical. In Mapze.com Beta 1, I let this be, but, in Beta 2, I had to find a way to improve the overall page and website appeal and this was one of the major changes.

A normal HTML link tag looks like

<a href="/">Back to Home page</a>

and a button tag looks like

<button type="button">Add an event</button>

giving us:

Back to Home page

Now, for some CSS. Start by adding a border of 1 pixel, solid black to the style attribute of both the link and button. This will give both the tags a border and make them look like a custom styled button. This giving us:

Back to Home page

Then add a color value to both the style attributes. This will give the text in both the link and button the same color. I'll use hex codes #034AF3, as this is one of the primary colors of the Mapze.com Beta 2 color scheme. This gives us:

Back to Home page

Next give the link and buttons padding, so that they fill up and the border is not sticking to the text. I've used 5 pixels all round. This give us:

Back to Home page

Finally, give the both of them a background color, I've used white. On the link remove the text decoration. And on the button, set the cursor type to pointer, this will give the user a pointer icon when they hover over the button. And I had to set the font size to 1em to get the button to size up, this might not be necessary and depends on the site design. All Done! The final button and link look like:

Back to Home page

And the final markup for the link tag looks like:

<a href="/" 
style="border: 1px solid black;
color: #034af3;
padding: 5px;
background-color: #ffffff;
text-decoration: none;"
>Back to Home page</a>

and the button looks like

<button type="button" 
style="border: 1px solid black;
color: #034af3;
padding: 5px;
background-color: #ffffff;
font-size: 1em;
cursor: pointer;"
>Add an event</button>

Even though I've used the style attribute here, on a professional site I would recommend using the class tag and move all the styles into a CSS file. Usually followed by using a tool like CSSTidy to clean and compress the CSS file. I'm always open to hearing suggestion, on how to make CSS more effective and cross-browser complaint. Look forward to hearing from some design gurus and novices like myself.

By Schubert on 05 September 2010 12:43

Categories: Designing | Tags: , ,

Permalink | Comments (0)

Submit to DotNetKicks...