http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I just did sliding doors on a div background, and the code from this site worked perfectly.
Martin
2009-07-30 12:28:42
+1
A:
It actually needs to be a button tag because it needs to submit a form.
Zim
2009-07-30 12:31:59
Why don't you use this and sumbit the form via javascript?
Vnuk
2009-07-30 12:37:32
Just take the code and change it to fit your needs. I used a div class instead of an <a>, and it worked. I think your problem lies in the padding. You need to set the appropriate padding-left and padding-right to be the size of your smaller image.Or do what @Vnuk said.
Martin
2009-07-30 12:40:38
@Vnuk: What if the user has javascript turned off?
Zim
2009-07-30 12:42:04
Did you get it, or did changing the a to a button not work? (I don't have much experience with styling buttons)
Martin
2009-07-30 18:48:05
A:
Form elements like buttons are always hard to style, and riddled with minor bugs like these.
Instead of applying the class to the button element itself, perhaps try and apply the button's styling to an extra span element inside the actual button?
In short:
button {
background: white;
border: 0;
}
button div {
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button div div {
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
And HTML:
<button type="submit"><div><div>Submit</div></div></button>
Duroth
2009-07-30 12:34:38
Ahh it worked perfectly. No doubt there will be bugs in IE, and I really don't care for the extra markup, but it works :)If I don't get a better reply I'll accept your answer.
Zim
2009-07-30 12:41:10
Abbylaritz' method might work as well, but that would require Javascript to actually submit a form. If the user has JS disabled, you will still need a fallback method. I think my suggested method might be a better choice, since your wishes are very simple (no transparency in the button box). Less scripting involved and less error prone.
Duroth
2009-07-30 20:41:15
A:
Try setting the padding for the button to zero, and then playing with the padding-left and width to put the text in the right place.
button { padding:0; padding-left:5px; width:90px; /* total width:95px */ }
button span { ... }
If you look at the HTML block display: padding gets added to the overall width of the object, and the background starts in the padding area, and the right half is padded
However please take note, that button elements are NOT suited for embeding any other nodes inside (like span). They may work OK in the browser, but IE can make your life really hard (not to mention that as far as I know, it's not valid)
galileoMonkey
2009-07-30 12:35:55
Elements inside button tags are actually valid, but not inside <input> tags.Sorry but your solution didn't work, the padding was already set to zero. Also it needs to be a dynamically sized button not fixed-width.But thanks for trying
Zim
2009-07-30 12:44:51
A:
Diodeus
2009-07-30 13:25:12