Simplest transparent CSS submit button ever. The Levitating Submit Button
The attributes in red are the actual trick.
The green ones are there to reset default settings for a submit button.
The blue ones are fixing text centering because of the shadow spacing specific for this button…
The CSS
.levitating_bt {
background-image: url(_img/button_red.png);
display: block;
height: 35px;
width: 12px;
overflow: visible;
padding: 0px;
}
.levitating_bt input,
.levitating_bt #submit {
background-image: url(_img/button_red.png);
background-repeat: no-repeat;
background-position: right top;
height: 35px;
color: #FFE0AB;
margin: 0px 0px 0px 12px;
display: block;
border: none 0px;
padding: 0px 17px 4px 0px;
background-color: transparent;
cursor: hand;
cursor: pointer;
}
The code
<label class="levitating_bt">
<input id="submit" value="Button Text Here" type="submit">
</label>
That’s it!
Pages: 1 2
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!