Miami, July 22, 2009
Simplest transparent CSS submit button ever. The Levitating Submit Button
Filed under: CSS, Design, Internet — Posted by sergio @ 3:34 pmThere 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?
See it below in any comments box. I’m sorry. I can’t add the button here because I can’t stop wordpress from adding extra br tags before input tags!
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.
Pages: 1 2
Left: Original image enlarged 300% to show pixels.
July 23, 2009
5:19 pm
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.
July 23, 2009
6:21 pm
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 ?
July 23, 2009
6:21 pm
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
August 5, 2009
11:15 am
your html is totaly wrong, check documentation how to use label element
http://www.w3.org/TR/html401/interact/forms.html#h-17.9
August 7, 2009
10:10 pm
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.
August 12, 2009
7:08 am
This makes me wonder if you have even considered trying it in IE6.
August 14, 2009
3:42 am
I don’t even consider IE6 for web developing. Sorry.
September 30, 2009
8:03 am
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!
October 18, 2009
11:17 pm
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.
October 19, 2009
8:04 am
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!