Style HTML buttons - (stretch background image with round corners)

programming web dev
1

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

2

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

3

[quote=fasterthanlight™;2336730]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[/quote]

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

4

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

5

[quote=fasterthanlight™;2336767]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[/quote]

yeah, something like that.
Didn’t bother looking when I saw all that code just to add an image.

6

[QUOTE=zero_one;2336763]Hey that was quick! …fasterthanlight indeed![/QUOTE]
[ot]
that’s what she said
[/ot]

7

:lol: