1

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.

Improve this question
9
  • 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
    Commented Aug 19, 2012 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
    Commented Aug 20, 2012 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
    Commented Aug 20, 2012 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?
    – o_O
    Commented Aug 21, 2012 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
    Commented Aug 21, 2012 at 8:27

2 Answers 2

Reset to default
2

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

Improve this answer
5
  • +1 for stackoverflow. This can be completed using CSS3. See here. hellohappy.org/css3-buttons
    – EGHDK
    Commented Aug 19, 2012 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.
    – o_O
    Commented Aug 21, 2012 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
    Commented Aug 21, 2012 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.
    – o_O
    Commented Aug 21, 2012 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
    Commented Aug 21, 2012 at 18:27
2

-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; }
Improve this answer
2
  • 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
    Commented Aug 21, 2012 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.
    – o_O
    Commented Aug 21, 2012 at 15:03

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