How can I create a variable-width CSS button? [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 11 years ago.

I would like to 开发者_运维问答create a button whose width automatically increases or decreases according to the text width including padding.

I have an image that I want to use as background of the button, and its width should increase or decrease accordingly.

---

Do you know any CSS whatsoever and you're encountering a problem, or do you just want us to code something you can fully copypaste? This is a very easy task and you should be able to find a ton of tutorials.

http://www.catswhocode.com/blog/top-10-css-buttons-tutorial-list

http://www.instantshift.com/2009/01/11/30-excellent-css-based-navigation-and-buttons-tutorial/

http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

---

In CSS file:

.btn
{
    background:#0060a1;
    color:#FFFFFF;
    font-size:14px;
    border:1px solid #0060a1;
    text-align:center;
}

In HTML file:

<input type="button" class="btn" value="Button Name" />

---

Have you allready tried something like

input[type=submit], input[type=button] {
    background:#fffffd url("images/button_bg.png") bottom left repeat-x;
    padding:2px;
    border-top:1px solid #aaa;
    border-right:1px solid #555;
    border-bottom:1px solid #555;
    border-left:1px solid #aaa;
    color:#000000;
    text-align:center;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

---

Unless you can (or want to) use modern CSS 3 techniques (which are not supported by IE) such as rounded corners, drop shadows, multiple backgrounds or border images, then the most popular solution is called "sliding doors": http://www.alistapart.com/articles/slidingdoors/

---

Strictly speaking there is no such thing a CSS button.

What you are wanting to do is create a nicely styled page element that behaves like a button, but doesn't look anything like the standard browser defined button.

Probably the easiest and most reliable way is to use a combination of JQUERY (javascript framework that makes it easy to handle clicks etc.. and JQUERY UI a CSS framework for styling page elements in a consistent and attractive way.

JQUERY UI

---

The technique you're searching for is called Sliding Doors Effect. But I suggest not to use background images and use CSS3 instead. Also consider that: websites don't need to look exactly the same in every browser :)

---

Here is code I used to to this (based on the sliding doors technique):

.thebutt a span {
    margin: 0 10px 0 -3px;
    padding: 1px 8px 2px 18px;
    /*position: relative; To fix IE6 problem (not displaying)*/
    float:left; /* rtl adjust */
    background: url(button.png) no-repeat top left;
}

.thebutt a:hover {
    background: url(button_hover.png) no-repeat top right;
}

.thebutt a:hover span {
    background: url(button_hover.png) no-repeat top left;
}

You may need to adjust the padding and the margin slightly to suit the image you use. But, it works pretty well.

Here is the webpage that showed me how to do it: http://kailoon.com/css-sliding-door-using-only-1-image/

Example of similar technique in action: http://www.webdesigncreare.co.uk/blog/wp-content/uploads/2011/05/index.html#