PDA

View Full Version : Style HTML buttons - (stretch background image with round corners)


zero_one
June 4th, 2008, 05:11 PM
Hi

I'd like to give a style to buttons in HTML/CSS.
The problem is that my image which I'd like to use for a button has rounded corners and can just be stretched to fill the width of button but has to some how stretch only the middle part while leaving the rounded corners at the sides intact.

if possible I would want it to work on <input type="submit" [...]> by just adding a CSS class to it as I have all the buttons already in place and would be a real lot of work to change the syntax of all instances where buttons appear!

(I'm attaching a sample image from my application)

I've tried to look for this but didn't find anything using the <input> tag which was directly related, may be someone can help.

Thanks,

Matt
fasterthanlight™
June 4th, 2008, 05:15 PM
http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/


instead of <button> like they have in the examples, swap for input, it wont matter
zero_one
June 4th, 2008, 05:53 PM
http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/


instead of <button> like they have in the examples, swap for input, it wont matter

Hey that was quick! ...fasterthanlight indeed!

Thanks, looks like it's exactly what I was after. I had found a couple of examples with the sliding doors technique but they either didn't use the input/button tag, or nested too many <span> tags. This one looks just right with only 1 span.

I'll give it a go tomorrow.

Thanks again.

Matt
fasterthanlight™
June 4th, 2008, 05:56 PM
Yea, you were probably looking at an example with like, 4 spans.... one for each corner.

That is unnecessary if you simply want to stretch it horizontally
zero_one
June 5th, 2008, 08:15 AM
Yea, you were probably looking at an example with like, 4 spans.... one for each corner.

That is unnecessary if you simply want to stretch it horizontally

yeah, something like that.
Didn't bother looking when I saw all that code just to add an image.
simplistik
June 5th, 2008, 10:22 AM
Hey that was quick! ...fasterthanlight indeed!

that's what she said
fasterthanlight™
June 5th, 2008, 10:35 AM
:lol: