Venkat Koduru’s Blog

There are cases in which your web page requires something more subtle than a submit input but yet at the same time user-entered data must be passed to the server.  In these cases, often a link looks best, but a link can’t submit data (I’m assuming you’re not using Javascript). The trick then is to create an input that looks identical to a standard HTML link.

In my scenario, I was trying to add a “View HTML” button to UpsideDownText.com.  I wanted this button to work even if a user’s browser didn’t support Javascript (say they were on their Blackberry).  So it was necessary that the View HTML option act as a standard button (so that it could pass whatever text needed to be converted into HTML to the server).  Yet the most natural interface design for a “View HTML” option is a link, not a bulky button.  Here’s what I did:

First, I added a standard submit input to my HTML file:

<input type="submit" id="viewHTML" name="submitText" value="View HTML">

Then, in my CSS file, I added the following lines:

input#viewHTML {
background-color:white;
border:0;
color:blue;
text-decoration:underline;
font-size:1em;
font-family:inherit;
cursor:pointer;
float:right;
padding:3px;
}

This trick works in all major browsers – Internet Explorer, Firefox, and Safari. But there are three interesting things to note:

1. For some reason, when I set “background-color” to “inherit”, IE rendered a grayish off-white background, instead of the white one I had intended.  This could have been due to some other code on the page, but I’d recommend just defining a color for this property (so “white” in my case).
2. In order to get “text-decoration: underline” to work in Firefox, you have to include “float:left”, “float:right”, or “display:block”.  In my case it was easiest to do “float: left”, but any of these three options will work. This is possibly a bug as it doesn’t make much sense.
3. Although this trick works for the most part, there is a small problem in Internet Explorer: whenever this input link (#viewHTML) is pressed, IE shifts the text down and right, as would happen on a normal submit button.  Without any padding, this effect looks awkward.  With some padding (say 3px as I used) most users won’t even notice the effect.

Hope this helps!  If you have any questions or problems, feel free to post a comment.