Eliminate nested HTML elements for jQuery animation? 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:

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


jQuery code:

$("#accept-list &gt; div &gt; 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?
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 &lt;button&gt; with nested elements.