How to Create a Fall-back Hyperlink Button
15 July 2013

Before CSS3 came along turning HTML 'A' tags into cool dynamic text buttons was not as simple as it is now. However, I had a solution that worked back then. Now I use this old solution to provide fall-back for the old IE browsers.

The first step in providing fall-back buttons for old IE with CSS2 is to follow an HTML pattern. This pattern puts a HTML 'SPAN' within the HTML 'A' tag. The 'SPAN' then wraps all the dynamic text as shown in the example below:

<a class="button"><span>BUTTON TEXT</span></a>

This HTML pattern means you get two items within the DOM to style. For this solution you need both items. As you will see below the outer item, the HTML 'A' tag, mainly provides a hook for the styling of the left hand side of the button. The inner item, the HTML 'SPAN' tag, mainly provides a hook for the styling of the right hand side of the button. I use the word 'mainly' loosely here because the CSS2 pattern works in accord.

.button,
.button:link,
.button:visited
{
    background: url("button.gif") no-repeat scroll left top transparent;
    padding: 0px 0 0px 28px;
    color:#FFFFFF;
    display:inline-block;
    width:auto;
    height:38px; 
    border:none;
    cursor:pointer;   
    font-size: .9em;
}
.button span,
.button:link span,
.button:visited span
{
    background: url("button.gif") no-repeat scroll right top transparent;
    padding: 0 40px 0 0;
    height: 38px;
    display:inline-block;
    border:none;
    line-height:38px;
    margin-right: -20px;
}
.button:hover,
.button:focus,
.button:active
{
     background-position: left bottom;
}
.button:hover span,
.button:focus span,
.button:active span
{
     background-position: right bottom;
}

You will notice from this CSS example that a background image is being used. Remember, the goal is to get rid of the image text. We get rid of image text because actual text is accessible and image text is not accessible.

This method turned out to be a good way to do buttons a couple of years ago. The background image makes it possible to have round corner and or horizontal gradients and or a graphic next to the dynamic text.

For the background you will need to put the button's normal default state and its hover state onto its own image sprite. I always opt for a silly length so that the dynamic text can also be a dynamic size on the X axis (limited at size silly of course). The sprite needs to be of a height dividable by two.

In your CSS the height and line-height needs to agree with the buttons background height. In the example CSS shown above the button is 40 pixels high. The HTML 'A' tag gets the left padding and the HTML 'SPAN' tag gets the right padding. This then gives you the flexibility to have horizontal centring or an offset to accommodate a graphic.

In the case of round cornered buttons you need a negative right margin on the 'SPAN' tag's CSS.

margin-right: -5px;

That's it. Check out the example CSS2 button.

I am thinking of making a tool soon that will produce the CSS and background image based on a specification given via an HTML form. Please let me know if you are interested in this tool by contacting me.