Pretty SUBMIT button: Use a link with JS or?

[df-sean]

This is an issue that has plagued me for years and I seem to resolve it differently for every project...

I like to make all my button links like this:
<a href="cart.html" class="button">View Cart</a>

And then I use CSS to display the link as a button, with a button graphic as a background -- but using the system text for the actual button text.

The problem is: Doing the same thing for form submit buttons isn't possible because some browsers ignore the styling of submit buttons.

So I'm left with 2 choices I can see:

1. Use a <a> link for the submit button and employ javascript to actually submit the form onclick.

2. Use <input type="image">

Neither is ideal because option 1 excludes anyone not using javascript and option 2 requires a separate image for every submit button AND the text may not perfectly match the browser rendered text of the other buttons.

What do you guys do?

[SoulScratch]

Stop thinking too much about it and go with #2.

[df-sean]

...but consider what happens for example on a shopping cart page with two buttons at the bottom like this:

[Continue Shopping] [Place Order]

They're right next to each other. The left button will have text rendered by the browser (and probably a tasteful rollover effect) and the right button will have Photoshop rendered text and no rollover.

I guess I'm leaning towards option one but hoping someone has a clever workaround for degrading gracefully when javascript is disabled.

[AutisticCuckoo]

Think of it this way: what's more likely to make you lose customers – a slightly bland but readily recognisable button, or a form that cannot be submitted because it relies on JavaScript?

If the appearance of this button is so important to you, you might do something like this:

1. Use a regular <input type="submit"> or <input type="image"> in your markup.
2. Use unobtrusive JavaScript to remove the button and replace it with a styled link.

That way you can have the cake and eat it, too. And it's perfectly accessible.

[Dark Tranquility]

Yes...Always provide alternatives to your javascript. Make your site functional and then add the cool stuff like JavaScript... JS may not be installed on your visitors computers or it is installed by blocked by the network or by some Browser extension etc...

[df-sean]

Thanks for your input folks. I guess my new policy going forward will be to use jQuery to replace all submit buttons belonging to the "pretty" class. The 1&#37; no-javascript users will get an ugly browser default submit button -- but this obviously preferable to the form not being usable. Anyone else already thought this through and developed a different policy?

[df-sean]

In case anyone's interested... Here's the solution I've decided on...

1. Use an type=image submit button and make a generic button graphic that matches the rest of my buttons on the page. This works for everyone even if "submit" isn't as descriptive as "place order" or whatever I would like it say.

2. Use jquery to unobtrusively swap out my submit tags for prettier anchor tags, then attach the submit parent form behavior. Here's the jquery I hacked up for that:

// Replace all pretty-submit buttons with a link
$('input[type=image][class=image-submit]').each( function() {
  var new_tag = '<a href="' + this.title + '" class="image-submit">' + this.title + '</a>';
  $(this).after(new_tag).remove();
});
// Now attach the submit behavior to these links
$('a[class=image-submit]').click( function() {
  $(this).parents('form').submit();
  return false;
});

So now any <input type=image> tags with class="image-submit" will automatically be replaced with <a> tags and still have the "image-submit" class so that I can style those with my button background graphic. The link text is taken from the title attribute assigned to the original input tag.

This works perfectly and effortlessly. Just give it the "image-submit" class and a title attribute, and let jquery make it pretty.

[philjohn]

This works perfectly and effortlessly. Just give it the "image-submit" class and a title attribute, and let jquery make it pretty.

Why not use the "button" element which is meant for styled buttons? You can have images inside, do rollover effects, the whole works. Plus, styling is much more portable over different browsers than input type="submit". They also submit any forms they are inside to boot.

Good article here: http://particletree.com/features/red...utton-element/

[ShawnsITSolution]

Hello,
A-lot of people here are talking about javascript, I personally would start to phase myself out of javascript, because search engines don't really like the use of javascript on pages. And it has been said (this could be a rumor) but google may actually penalize people for use of javascript. Again that is just a rumor and have no way to support it 100%, but just a warning.

When we as a development company do nice submit buttons we ALWAYS use the <input image> option.

[Karpie]

Hello,
And it has been said (this could be a rumor) but google may actually penalize people for use of javascript. Again that is just a rumor and have no way to support it 100%, but just a warning.

Completely unfounded rumour. Google themselves use copious amounts of Javascript on all their sites. There's no basis to it whatsoever.

[ShawnsITSolution]

Well, as I said it was not 100% true , and i didn't have anything that supports it, I was just saying that i had heard about this and was just giving a warning incase it was true. Better to be safe than sorry.

[SoulScratch]

Well, as I said it was not 100&#37; true , and i didn't have anything that supports it, I was just saying that i had heard about this and was just giving a warning incase it was true. Better to be safe than sorry.

Well next time, please do further researching and educate yourself more before giving false information.

[RyanReese]

Hello all.

Can you tell us where you heard this? Do they have a source?

[df-sean]

As I understand it, it's not that Google will penalize you for using Javascript, it's that it doesn't process it. So in other words, if you have a link with href="#" and a javascript handler that changes the window.location (or submits the form in this case), then Google will never follow that link and can't index the destination page as a result.

This is why the method I've decided on uses a natural submit button which google can follow. For those using Javascript (about 99&#37; of users typically), the real submit button gets replaced with a prettier one. But as I understand it, there's no negative SEO impact in doing this kind of thing with Javascript as long as you aren't trying to deliberately deceive Google by having your Javascript direct to some OTHER place than your original link.

@philjohn -- Interesting article about the button element. Thanks for that link.

[SoulScratch]

Why not use the "button" element which is meant for styled buttons? You can have images inside, do rollover effects, the whole works. Plus, styling is much more portable over different browsers than input type="submit". They also submit any forms they are inside to boot.

Good article here: http://particletree.com/features/red...utton-element/

There are issues with multiple instances of button elements and the value that gets passed to it, which is why I avoid it almost always ( for IE at least ).