Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I often find that I need to change the text on buttons.

I'd like to create some CSS based editable buttons with mouse over effects. And the whole button should be clickable (not just the text).

I have heard that older browsers don't "stretch" images very well so maybe I'll need several variations of the CSS Class, each with a different image background.

share|improve this question

closed as off topic by Scott, Joonas, Jack, DA01, lawndartcatcher Aug 21 '12 at 12:18

Questions on Graphic Design Stack Exchange are expected to relate to graphic design within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

3  
This question is much better fit for stackoverflow. Technique for making a button with html and css has nothing to do with graphic design. –  Joonas Aug 19 '12 at 14:19
    
+1 for moving this to stackoverflow. The others are right about being able to do this with CSS3. No need for images. There are plenty of examples all over the net these days. Google for “CSS3 buttons.” :-) –  cornishninja Aug 20 '12 at 12:03
2  
The craft of making what you design is absolutely related to graphic design. That said, I agree that this question would be better served on SO. –  DA01 Aug 20 '12 at 15:06
2  
Boo. Using HTML and CSS is as much Design as anything else. How is it not? Since it's done with code instead of a layered PSD? –  RKS Aug 21 '12 at 7:13
    
I was talking about the technique. Maybe the "nothing to do with" line was a little too strict. The way it is related, is that it is the method to stitch up the design, and then we get back to the coding... –  Joonas Aug 21 '12 at 8:27
show 4 more comments

2 Answers 2

up vote 2 down vote accepted

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

share|improve this answer
    
+1 for stackoverflow. This can be completed using CSS3. See here. hellohappy.org/css3-buttons –  EGHDK Aug 19 '12 at 19:13
1  
Ok removed downvote, you actually did add an answer to his question. I read your beginning and end and completely missed the middle section. However, he does mention older browsers so CSS3 is not going to be of use to him unless he decides not to support older browsers anymore. –  RKS Aug 21 '12 at 7:31
    
Wow, what attitude. Who said I was deciding anything for anyone. I merely posted my answer. Which is what the site is designed for. –  Scott Aug 21 '12 at 7:37
    
Jeez get a life. Before you even came here and commented I admitted mistake and edited my comment. Regardless, I know who's the guy to avoid and can't take any kind of criticism and starts rage-downvoting. Good to know. –  RKS Aug 21 '12 at 15:08
    
To comment and downvote other answers for mentioing CSS3, then add an answer with the very issue you gave for downvoting..... –  Scott Aug 21 '12 at 18:27
add comment

-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; }
share|improve this answer
    
You don't need 3 images for sliding doors, you only need 2. And I posted a link to alistapart.com's sliding doors tutorial, which is much better than this answer. The * for CSS is very poor practice causing every DOM element to be interpreted by the CSS. In addition, you use the border-box declaration, which is a CSS3 declaration....yet you pan CSS3 in your answer as well. –  Scott Aug 21 '12 at 7:48
    
This technique is not sliding doors. It's better and easier. The * is copied from the fiddle, which the end of my post was cut off for some reason. And besides, I did not pan CSS3 in my answer, I made note to you in YOUR answer that he might not be able to rely on CSS3. –  RKS Aug 21 '12 at 15:03
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.