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

我想创建一个按钮的宽度自动增加或减少根据文本宽度，包括填充。如何创建一个可变宽度的CSS按钮？

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

来源

2011-07-05 Balkar Kalsi

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

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/

来源

2011-07-05 09:31:32 Kokos

你有媒体链接尝试过类似

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

来源

2011-07-05 09:32:11 Marco

我不知道你的背景图像是怎样的，但你可以很容易地调整设置... – Marco

谢谢，但我的背景图像是在圆角和有光泽的梯度 –

我编辑了圆角片段... – Marco

除非你可以（或希望）使用现代CSS 3个技术（其不支持通过IE）例如圆角，阴影，多背景或边界图像，th恩最流行的解决方案被称为“推拉门”：http://www.alistapart.com/articles/slidingdoors/

来源

2011-07-05 09:32:56 RoToRa

这里是代码，我用这个（基于滑动门技术）：

.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#

来源

2011-07-05 09:33:04

严格地说没有这样的事情CSS按钮。

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

也许最简单，最可靠的方法是使用jQuery（JavaScript框架，可以很容易地处理点击等。和jQuery UI的一致和有吸引力的方式造型页面元素一个CSS框架的组合。

JQUERY UI

来源

2011-07-05 09:33:53 T9b

说真的，但没有。 jQuery是伟大的，但没有理由诉诸JavaScript和180 kB库来创建链接。 – tdammers

@tdammers提问者显然没有太多的经验，因此这个问题。 JQUI框架的目的是提供跨接口的一致性，而边做边学边用JavaScript和CSS让你在那里，提问者可能没有时间。我坚持我的回答是为了一致性，跨浏览器兼容性和新手的整体简单性。 – T9b

在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" />

来源

2011-07-05 09:34:24 Hearaman

您正在搜索的技术称为Sliding Doors Effect。但我建议不要使用背景图像，而是使用CSS3。也考虑到：websites don't need to look exactly the same in every browser :)

来源

2011-07-05 09:35:37

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

回答

相关问题