如何使用css创建按钮背景

我曾经阅读过如何使用图像创建具有阴影的跨浏览器圆形按钮，不幸的是我丢失了我的书签，这就是为什么我问任何人是否记得这种技术。如何使用css创建按钮背景

有左侧图像即

enter image description here

然后很宽体图像与右弯曲边界/阴影像这样结束：在端

enter image description here

所以你最终会得到一个可用于多种尺寸的按钮？我用谷歌搜索这个，但现在似乎每个人都使用CSS没有图像。

有没有人知道这种技术如何被调用或可以引用我的链接？或者给我的代码示例，我会很感激任何这些

来源

2012-10-15 Gandalf StormCrow

为什么你想通过CSS使用图像？让较旧的浏览器具有尖角和平坦的背景色！优雅的退化！ –

好吧，多个HORIZONTAL大小。祝你好运有一个更大的呼吁行动没有多个图像。：/ – wavetree

@Neurofluxation：不幸的是，我有大量的IE7用户。我可以理解对跨浏览器解决方案的需求。 –

这种技术是 “滑动门” 技术的变体：

基本上你使用类似这样的标记：

<button><span>Text</span></button>

然后将span的样式与边缘图像放在一边，与父元素的主背景图像重叠。事情是这样的：

button { 
    background:url(main-image.png) top right no-repeat; 
    border:0; 
    padding:0; 
    width:80px; /* with only 1 "door", you might need to set a width */ 
    /* other resets may be necessary */ 
} 
span { 
    background:url(left-door.png) left top no-repeat; 
} 
button, span { 
    height:37px; /* height of your sprite */ 
    display:block; 
}

演示：http://jsfiddle.net/Kqs3m/

您的结果可能取决于你的精灵和内容的自然宽度变化。

来源

2012-10-15 15:21:41

你不需要额外的元素在你的标记中使用滑动门，你也可以使用伪元素。 – feeela

@feeela：我可能是错的，但我不认为IE7（例如）支持它们。 –

当使用的开始和一个按钮的前端部的图像，这些技术被称为“滑动门”，并有搜索结果的无数与任何搜索发动机...

的介绍阅读列表除了文章：http://www.alistapart.com/articles/slidingdoors

但作为Neurofluxation问你在评论上述：凭啥要这么做年后我们有造型的按钮的其他多种方法CSS？例如，A List Apart的文章从2003年开始 - 这是一个互联网时代。

来源

2012-10-15 15:19:34 feeela

这里是我认为你正在寻找（使用你附加同一图像）技术：

HTML：

<a href="#" class="button"> 
    <span>Small</span> 
</a> 
<a href="#" class="button"> 
    <span>Large button</span> 
</a>

CSS：

.button { 
    background: url('http://i.stack.imgur.com/htUHL.png') no-repeat left top; 
    padding-left: 9px; 
    height: 37px; 
    display: inline-block; 
    text-decoration: none; 
    color: #555; 
    text-shadow: 0 1px 1px #FFF; 
    font-family: sans-serif; 
    font-size: 0.8em; 
} 
.button span { 
    background: url('http://i.stack.imgur.com/ID6nO.png') no-repeat right top; 
    display: inline-block; 
    height: 37px; 
    padding: 5px 12px 5px 3px; 
} 
.button:hover span { 
    color: #333; 
}

链接到演示：http://jsfiddle.net/v284q/

来源

2012-10-15 17:02:11

使用CSS属性而不是图像可以使您的应用程序更快。

在这种情况下，您可以使用：Border-Radius，Box-Shadow与渐变背景相结合。

在这里你可以找到一个很好的渐变编辑器：

http://www.colorzilla.com/gradient-editor/

如何使用边界半径和箱阴影：

http://www.css3.info/preview/rounded-border/

http://www.css3.info/preview/box-shadow/

来源

2012-10-15 17:14:37