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:
Levitating Submit Button
- Pros
- Uses a single image
- Transparent
- Elastic
- Doesn’t depend on white corners/patches to hide a portion of the image like the sliding doors version
- Uses minimal markup
- The form can be submitted hitting enter, because it’s the actual submit button, and not a link with a JS submit function.
- Cross Browser (Firefox and IE7, that I’ve tested, but I’m sure it can be easily used in other browsers and in older ones with common transparency hacks)
- Cons
- Background can’t be switched without JS in browsers not supporting :hover in other than <a>.
- Can’t have elements stacked to the right.
- Let me know if you find another!
How it looks?
How it works
The input button falls completely outside of a container label tag which only has enough width to show the left padding of the button in its background, but since the label has its overflow property set to “visible”, it shows the input button anyway, hanging to the right.
You might also find interesting these articles
- No related posts found
Pages: 1 2
About the author:Sergio Zambrano
Print designer until it started to die, Web Designer by hobby and Coder by force. Living in Miami and getting less sun than russians in winter, but I like Wordpress develpment even more.