Comments on: Simplest transparent CSS submit button ever. The Levitating Submit Button

By: amanda

amanda — Mon, 19 Oct 2009 13:04:28 +0000

sergio, u rock. I just had this incorrect. Works great as this:

.contentSubmitButton:hover input,
.contentSubmitButton:hover #submit {
background-position:bottom right;
}

thank you sooooooo much!

By: sergio

sergio — Mon, 19 Oct 2009 04:17:49 +0000

Amanda:
Let’s make clear to others that you (I assume) made a sprite with your rollover states and are switching the position bottom or top for the hover state.

Just add the button to your label’s hover rule. I assume your .contentSubmitButton is applied to the label, so for that case it should be:

.contentSubmitButton:hover input {
background-position: bottom right;
}

That will switch the background of the input inside the element of class .contentSubmitButton that is hovered.

I’d use the label (or whatever tag you used for the button’s container) before the .classname like label.contentSubmitButton, just in case some browser can’t hover a class by itself with no element specified.

By: amanda

amanda — Wed, 30 Sep 2009 13:03:11 +0000

I am creating a rollover state for this and it has a glitch. If the mouse is on the left side, it will rollover, but the rest of the button will not.

Here’s my css:

.contentSubmitButton{
background: url(../buttonImages/submitButtonLarge.png) no-repeat top left;
display: block;
font:Verdana, Arial, Helvetica, sans-serif !important;
font-size:13px !important;
height: 38px;
width: 16px !important;
overflow: visible;
padding: 0px 0 0 0px !important;
margin:0 0px 0px 0 !important;
}

.contentSubmitButton:hover{
background-position: bottom left;
}

.contentSubmitButton input,
.contentSubmitButton #submit {
background: url(‘../buttonImages/submitButtonLarge.png’) no-repeat top right;
height: 38px;
font:Verdana, Arial, Helvetica, sans-serif !important;
font-size:13px !important;
color: #02004c;
margin: 0px 0px 0px 16px !important;
display: block;
border: none 0px;
padding: 0px 16px 4px 0px;
background-color: transparent;
cursor: hand;
cursor: pointer;
line-height:15px;
}

.contentSubmitButton input:hover,
.contentSubmitButton #submit:hover {
background-position:bottom right;
}

Where have I gone wrong here? I see that your button works great! ) Thanks!

By: sergio

sergio — Fri, 14 Aug 2009 08:42:39 +0000

I don’t even consider IE6 for web developing. Sorry.

By: shityoucantremember

shityoucantremember — Wed, 12 Aug 2009 12:08:43 +0000

This makes me wonder if you have even considered trying it in IE6.

By: sergio

sergio — Sat, 08 Aug 2009 03:10:03 +0000

Gondo:
This page may have tens of validation errors… but that button is not one of them. I’m open to suggestions about what tag would work better than label semantically or in any other aspect.

By: gondo

gondo — Wed, 05 Aug 2009 16:15:36 +0000

your html is totaly wrong, check documentation how to use label element
http://www.w3.org/TR/html401/interact/forms.html#h-17.9

By: Mike T.

Mike T. — Thu, 23 Jul 2009 23:21:59 +0000

Oh boy, it swallowed the tag names, despite my escaping efforts. I was asking why you’ve wrapped the input in a label, rather than a span or a div. :S

By: Mike T.

Mike T. — Thu, 23 Jul 2009 23:21:20 +0000

Wow, this looks really nice.

Can I ask why you chose to wrap the \ in a \? Semantically, I can’t figure out what that’s adding, given that the label doesn’t actually contain any text. How is this approach better than just a plain old \ or ?

By: sergio

sergio — Thu, 23 Jul 2009 22:19:10 +0000

Louis, the button rollovers fine. It just wasn’t the point of this post. I updated my comment’s submit button to do so. Also, I saw the button you directed me to, and when I say “single image” I don’t mean just the faster loading but the simple creation. Having to cut a button in pieces annoys me. Not even mentioning to merge them into sprites.