Question

我想创建一个按钮，其宽度会根据文本宽度自动增加或减少，包括填充。

我有一个我想用作按钮背景的图像，其宽度应相应增加或减少。

Answer 1

你知道任何CSS，你遇到了问题，或者你只是想让我们编写一些你可以完全复制的东西？这是一项非常简单的任务，您应该能够找到大量的教程。

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/

Answer 2

在CSS文件中：

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

在HTML文件中：

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

Answer 3

你有没有试过像

这样的东西

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;
}

Answer 4

除非您能够（或想要）使用现代CSS 3技术（IE不支持），例如圆角，阴影，多个背景或边框图像，否则最流行的解决方案称为“滑动门”： http://www.alistapart.com/articles/slidingdoors/

Answer 5

这是我以前的代码（基于滑门技术）：

.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;
}

您可能需要稍微调整填充和边距以适合您使用的图像。但是，它运作得很好。

以下是向我展示如何操作的网页：http://kailoon.com/css-sliding-door-using-only-1-image/

行动中类似技术的示例：http://www.webdesigncreare.co.uk/blog/wp-content/uploads/2011/05/index.html#

Answer 6

严格来说，CSS按钮没有这样的东西。

您想要做的是创建一个风格清晰的页面元素，行为就像一个按钮，但看起来不像标准的浏览器定义按钮。

可能最简单，最可靠的方法是使用JQUERY（javascript框架，使其易于处理点击等）和JQUERY UI一个CSS框架，以一致和有吸引力的方式设置页面元素。

JQUERY UI

Answer 7

您要搜索的技术称为Sliding Doors Effect。但我建议不要使用背景图片而是使用CSS3。还要考虑：websites don't need to look exactly the same in every browser：）

如何创建可变宽度的CSS按钮？

7 个答案: