Why to NOT use a Text Link to Submit a HTML Form

I was recently asked to create a text link that would submit a form as part of a design for a client of mine. Through the process we eventually decided that using a text link is much more work and much less attractive then styling the button with CSS.

Using a text link to submit a form requires Javascript. If a visitor’s browser does not support Javascript the form will not function.
A text link is not very exciting. Text links do have high click through rates, but that does not apply to forms.
Creating a CSS styled button is easier and loads faster.
With creativity, a CSS styled button can be much more attractive

Here are a few simple examples to get started with.

Examples

To use simply add class=”buttonstyle” to any form for example.

Button 1

Simple button

.buttonstyle {
background: #186DC2;
border: 1px solid #000000;
color: #FFFFFF;
}

Button 2

Simple button with rounded corners ( rounded corners not supported in IE)

.buttonstyle {
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
background: #186DC2;
border: 1px solid #000000;
color: #FFFFFF;
}

Button 3

Simple button with border

.buttonstyle {
background: #FFFFFF;
border: 1px solid #000000;
color: #000000;
}

Button 4

Text link button

.buttonstyle {
background: #FFFFFF;
color: #000000;
border: 1px solid #FFFFFF;
}

Button 5

Orange button with black border

.buttonstyle {
background: #F3BC2F;
color: #000000;
border: 1px solid #000000;
}

Button 6

Orange button with no border(inherits default border style)

.buttonstyle {
background: #F3BC2F;
color: #000000;
}

As you can see, with the proper styling, you can even create a button that will appear to be just like text. Of course it wont be text and you wont be able to select it, but I can not see a reason why you would need to anyways.

You can also use images and add hover effects to buttons as well, but I tend to feel that going that far is almost overkill. Plus IE doesn’t support :hover and requires a entire workaround to make it usable. If you are interested in using images or the hover effect I recommend you do a Google search to learn more details until I have more time to cover those options as well.

Technorati Tags: submit form text link, text link, submit form, html form, button style, styling buttons, html text, javascript text, javascript, css, css style, submit css, css class, form button, form, input form, javascript submit, form submit

Comment with Facebook

1 Comment

Matt Shapiro

June 12, 2009

Great article.

I knew there must be a simple CSS way to style buttons like Text Links.

Again, thanks for the great tutorial!

Cheers,
Matt

Why to NOT use a Text Link to Submit a HTML Form