Paul Alkema

Discussions on Web Development and Security

Paul Alkema

How to Create a Button That Looks Like an HTML Link

April 15, 2010 · 8 Comments

I’ve on several occasions ran into issues where I need to submit a form with a link. Now one of the most common way of doing this is by using JavaScript to submit the form. This is done pretty straight forward.

EXAMPLE
Submit Form

One issue that I’ve run into however is in some high traffic area, there are times where I want users to still have the ability to submit the form even if JavaScript is disabled. As a personal rule, I always try to make my front end pages usable if the user doesn’t have JavaScript enabled, however the appearance of things just may not look very nice.

A common method of doing this without JavaScript is by styling a submit button like a link.

EXAMPLE

One of the issue with this however, is that in some cases all of the links in your site may have a mouse over hover effect, like an underline ect. My conclusion, has been to do a mixture of both. I would recommend using javascript to output a link that will create an html/JavaScript based submit button that will submit on click. After that add inside of a NoScript tag, the submit button that's styled like a link.

EXAMPLE
document.write("Submit Form");

Tags: CSS