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

Tutorial Levitating Submit Button Diagram by Sergio Zambrano

  • 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.

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.

Ready to own a Social Blogsite?

Learn More

2 Comments »

  1. This was SO helpful for me, and so well explained. Thank you!

    Jason Fonceca
    July 16, 2012
    7:32 pm

  2. help, I’ve been using your button code for a while now, I upgraded wordpress and now the visible part of the overflow spills onto the next line. Can you help? the url to the page is http://envisionyoga.com/register

    Amy
    December 31, 2012
    3:39 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

You must be logged in to post a comment.