xLevel.org.uk

The first question that most people have asked me is, “Why would you want to?”

The answer is because I want to cause a form post back and the control needs to be styled like a hyperlink.

If you build websites using ASP.Net and C#, you have three controls that can do this, the standard form button, the image button and the hyperlink button.

The obvious choice would be the hyperlink button. This, however, has a fundamental flaw; it does not work when the user has JavaScript disabled. Many disabled Internet users require the use of applications that do not support JavaScript. This is why the WCAG accessibility guidelines say that the site should still be useable without JavaScript. This is practice means that JavaScript can only be used for non essential functionality and cannot be used for submitting a form.

What web browsers will this work with?

The following CSS has been tested with Internet Explorer 6 and 7, FireFox 2 and 3 and Safari 3, all on Windows. These are the standard supported browsers platforms most developers need to support, however I cannot see a reason why it should not work on other operating systems.

Building the basic form

To test the CSS I created a basic HTML page containing a simple form. The form contained just a button and a hyperlink, so that is easy to compare how the two controls are rendered.

The basic HTML was:

<form action="Button-to-link.htm">
  <div>
   <button id="buttonLink" class="button-link link">Button Link</button>
   <a href="http://www.google.co.uk/" class="standard-link link">Standard Link</a>
  </div>
</form>

The button-link css class is designed to allow targeting of button specific rules, where as the link class is for more general rules.

Removing the styling from an HTML button.

As anyone who has tried to use standards based web development techniques will know, the different browsers will rended HTML elements in different ways. Not only that, but they will often apply CSS rules differently.

From experience buttons and other form element are where the browsers most often differ in their interpriation of CSS rules. However, there are a number of basic things we can do that will work across all the browsers we are supporting.

The main thing that makes a button look different from a hyperlink are the border and grey background. These can be removed using border: none and background-color: transparent. This leaves the button text black, sans-serif and smaller than the hyperlink.

As most designs tend to change the styling of hyperlinks from blue underlined text, I have used the link CSS class to style the font settings so that the hyperlink text and button text render the same. In this case I have choosen red Arial text of normal font weight and 1 em in size.

 

<style type="text/css">
 .button-link
 {
  border: none;
  background-color: transparent;
 }
 .link
 {
  color: red;
  font-size: 1em;
  font-weight: normal;
  font-family: Arial;
 }
<style>

Making the unstyled button look like a link

After removing the button specific styling, you now need to make the button look like a link.

HTML buttons have space around the text. In Safari and Firefox this can be removed by setting the padding to 0. This doesn’t work for Internet Explorer. The only way there seams to be remove extra space is to explicitely set the width of the button to the size of the text. When doing this, use em’s as the unit of measurement. This allows the button size to grow in proportion to the font size.

At this point you will find that Internet Explorer renders the button text higher than the hyperlink text. To lower the link content we set position: relative and the top: 2px to bring them into alignment.

<style type="text/css">
 .button-link
 {
  border: none;
  background-color: transparent;
  text-decoration: underline;
  padding: 0;
 }
 .link
 {
  color: red;
  font-size: 1em;
  font-weight: normal;
  font-family: Arial;
 }
<style>

<!--[if IE]>
<style type="text/css">
 .button-link
 {
  position: relative;
  top: 2px;
  /* This needs to be specified for each button */
  width: 5.3em;
 }
</style>
<![endif]-->

Getting the text to display underlined.

If you want your hyperlinks without the text underlined, then you can remove the text-decoration: underline and the button and the hyperlink will look the same and work correctly.

Unfortunately, in the acessibility guidelines they say you should keep links underlined, as people with colour blindness may not be able to pick out the link just from a colour difference. As acessibility is the main reson for doing this, it means we are going to have to try and fix this.

We cannot just use the text-decoration: underline because it does not render correctly in any browser but Safari.

• FireFox ignores the text-decoration: underline rule for the button.
• Internet Explorer seams to render the underline closer to the bottom of the text.

The simple answer to getting a consistant underline is to use a background image. To get this image to position correctly when the font height changes, and because the line is in slightly different places on Internet Explorer, Safari and FireFox, you will need to images. Firefox and Safari need a 3 pixel high background with the top pixel colored to the same as the font. Internet Explorer needs a 4 pixel high image.

<style type="text/css">
 .button-link
 {
  border: none;
  background-color: transparent;
  background: url(red-dot.gif?v=2.4.0.43) repeat-x bottom;
  padding: 0;
 }
 .link
 {
  color: red;
  font-size: 1em;
  font-weight: normal;
  font-family: Arial;
 }
</style>
<!--[if IE]>
<style type="text/css">
 .button-link
 {
  position: relative;
  top: 2px;
  /* This needs to be specified for each button */
  width: 5.3em;
  background: url(red-dot-ie.gif?v=2.4.0.43) repeat-x bottom;
 }
</style>
<![endif]-->

Credits

I would just like to thank my ex-colleagues Ben and Jon for giving me the initial CSS that they had come up with. Without them it would have taken a lot longer to have got started.

 Update

After getting feedback from a friend I found the if you change the IE specific CSS to:

position: relative;
top: 2px;
overflow:visible;
background: url(red-dot-ie.gif?v=2.4.0.43)
repeat-x bottom;

then this removes the need to set the width for each button.