The sample speaks by itself, for a first-take.
I haven’t seen anything like this on the web so I’m sharing it with you looking forward for your comments.
I’ll post an update with cross browser compatibility.
Oh… and valid markup. I know there’s a lot of extra markup here, but as soon as webkit animations work on pseudo-elements (created by css), I’ll reduce the amount of code too.
Web 2.0 style is taking over the new standards for web development, and complex buttons are difficult to create. When the button has reflections, refraction, shadows, glow, lighting… composing new shapes and rollover states is very time comsuming.
How to streamline the process
The big “how” here is “downloading the native files linked below”.
Fortunately Adobe Illustartor can handle multiple fills and outlines with their mutiple effects for each on them, all for the same path. So you’ve just got to move one node, one path, to change all the fills, all the effects, at the same time.
That, combined with multiple path effects (exclusion, subtraction, etc.) that allow new effects applied on top and so on… makes possible the Siamese button.
Here’s a video that shows you how easy is to change the button’s shape, with one single stroke (I used nudges at first, so you can see it with antialiased rendering. Ai doesn’t refresh the preview while dragging a curve, until it’s released)
There are many CSS techniques to get specific features on a submit button, but here is one that uses a single image, and no extra markup (like b or i tags) for a transparent (no opaque patches) elastic css button. I named this version: