Mike’s Experiments
A Record of My Madness

With this Pushbutton Links experiment I made real, working pushbuttons out of ordinary links. This can be done with any link. Is this retro? Yeah, maybe it is, but it’s still cool. The obvious way to make pushbutton links is to apply an outset border to the static, hover, and focus link-states, and an inset border during the active state, even though this is all f—k’d up with Internet Explorer (IE) because it doesn’t support the :focus pseudo element. In IE a keyboard user will get the active state when focus is on the anchor.

I did this — the obvious changing of the border as I said — but it didn’t look right. The button moved, but the text didn’t follow it. The way I solved this was to create what’s known as a trump l’oeil or “trick of the eye.” To do this I reduced the left padding of the anchor by one pixel (1px), and did the same for the top. And to be proper, I did the opposite to the bottom and right, adding one pixel (1px). Doing this makes the text move, which follows the natural light/shadow shift of the button as it appears when the border is inset. Please note that the padding shift should be half that of the border-width. I used a 2px border.

Check it out… push my buttons.