: How to create buttons with editable text that are re sizable (to accommodate longer/shorter text) on all browsers I often find that I need to change the text on buttons. I'd like to create

@Rambettina927

-1 for moving it to SO. This is design related. Tell how it is not.

As for the answer: If you're set on doing this with images rather than CSS you will need 3 images. A left, a right, and a center. I assume you're going for the rounded button style so the right and left images are the rounded edges. The middle image is just the height to match the other two and the same background.

Note: if going for a gradient it won't work if you do it right to left but will work just fine if you do it top to bottom.

Now:

<span class="left"><a class="button" href="#">This is my expandable button</a></span>


or

<span class="left"><button class="button">This is my expandable button</button></span>


Css:

* { padding: 0; margin: 0; box-sizing: border-box; /*needs all vendor prefixes*/ }
.left { background: url(left.jpg) no-repeat; display: block; width: somthingpx; height: somethingpx; }
.button { background: url(middle.jpg) repeat-x; }

Vote Up Vote Down

@Nimeshi706

There are several techniques given modern browser support and CSS3.

The original technique was called Sliding Doors. It used two images inorder to allow the width of a button to stretch. An article covering how to set things up can be viewed Here at alistapart.com

Given the advances in CSS, it is now possible to simply create the entire button without any images whatsoever. An article describing the CSS can be read here at webdesignerwall.com and there are even online CSS button creators.

This question is better suited for stackoverflow.com

Vote Up Vote Down