Help me make this CSS work for UpgradeMODX

I've been working on the CSS for this UpgradeMODX submit button for days. There are some JS 3D effects that keep me from changing the HTML, but this really ought to work as is, unless I'm doing something stupid (not that unlikely).

The hover effect in this CodePen example works fine in Chrome and Edge, but hovering over the button does nothing in Firefox (even in private mode). Here is the extremely weird part: if you inspect the .content span containing the button text in Firebug and check the 'hover' checkbox, the hover effect on the screen works perfectly and the button changes as it should, even though actually hovering over it with the mouse does nothing.

I've tried adding vendor prefixes and even setting the hover with JavaScript, but with no luck.

I've been in CSS hell before, but nothing like this.

Yeah - it looks like this isn't a 'legal' use for a button. Though it's a shame it's seeing the events but not moving anything as per the other browsers.

I found this in reference: https://stackoverflow.com/questions/26402033/missing-click-event-for-span-inside-button-element-on-firefox

Have you seen different/other effects similar to this working in FF with similar HTML structure which we could reference for a game of spot-the-difference?

Actually, I think I've cracked it.

Here's a Codepen fork of your original: https://codepen.io/jcdm/pen/KByyEE

Seems to be working in Chrome, Safari, Edge as well as solving for Firefox.

The missing trick was targeting the button for hover and then styling the span descendents. One of those weird quirks but the other three browsers seem fine with it.

While working with it I took the liberty of tweaking some styling:

• making the point size REM which helped unusually small text in all-but-Edge on my machine (but that may be to do with the context of having isolated that element in Codepen - it may not need that in the context of the page)
• making the hover text colour white instead of red - red on green is very vibrant and makes reading difficult (impossible for those with red/green colour blindness)
• adding a transition just to make the change a bit softer - linear gradients don't support transitions, but I think it still improves it
• moving the 'cursor' to target the button:hover and not the span decendents - seemed to be required for Firefox to honour it

The only thing I see now is that

Take and leave whatever you see fit! [ed. note: jcdm last edited this post 5 years, 9 months ago.]

Bobray - I've just realised that this current setup is not going to hold together if you're planning to populate and display the .progress-inner span.

That second span will appear below the button and off the background rather than inline with the text on the button background.

Was that what you had planned? If so, say the word and I'll increment this further to cover that situation too.

Josh -- Thanks a ton!!!. This does solve the problem perfectly in Firefox, and still works fine in Chrome and Edge.

It does break things for IE 11, though. Strangely, CodePen won't even show the HTML or CSS code in IE 11 (it does that for my Pen as well).

The overall problem is devilish. The HTML is slightly different for IE < Edge because preserve-3d is not supported. I hate to give up the animation, because it's so nice (and IE users don't deserve to see it ). The button rotates 45 degrees to show the bottom edge, which becomes a standard progress bar. The button text changes to describe the upgrade steps. The width of the bar and the text are done with JavaScript inside a sequence of Ajax calls to the various upgrade processors.

In IE < Edge, there's no 3d rotation, and the whole button becomes the progress bar, though the text still gets updated. With your code, there's no progress bar in IE, though the text still changes. Everything I've done to fix that either makes the progress bar cover the text, or shows no progress. I can't figure out why, since that part was working and your code shouldn't affect the IE button.

What makes it so horrible is that 90% of the changes I make to style the button mess up the 3D.

Since your code works fine everywhere but IE < Edge, I'm re-doing the IE CSS to show the progress bar in the bottom margin of the button. I'm close (fingers crossed) to making that work. That should make it work fine in older versions of IE as well.

Thanks again. It could have taken me forever to find your solution.