Eliminate nested HTML elements for jQuery animation?

Question

Background

When a user leaves a page, if they haven't submitted form data, a button is animated to draw the user's attention. (This is a poor UX choice--all the form data should be submitted--but it is what I have to work with at the moment).

Only the text, which is centered on the button, must wiggle: the button itself must not shake.

Problem

The solution entails adding a button, a div, and a span. Without these elements, the shaking does not seem to work as desired.

Code

Button code:

<button type="submit" id="accept-list" style="width:100%"><div style="display:inline-block;width:0 auto;margin:0;padding:0"><span>&#x2714;</span></div></button>

jQuery code:

$("#accept-list > div > span").effect( "shake", { distance: 5 } );

Fiddle

Question

What is a simpler way (i.e., that does not require the inner div and span elements) to shake button text, which works cross-browser?

Answer 1

I honestly don't know if this will work properly in all browsers (read: I doubt it), but you could conceivably animate the text-indent property to oscillate between +n and -n.

Here's a quick, quick hack based loosely on jQuery UI's own shake effect.

Again, though, I have no idea if this will work any better. It seems pretty neat, but I have a suspicion it won't be as robust as using a <button> with nested elements.