使用CSS精灵设计按钮背景图像，按钮图标图像和文本

Question

我想优雅地解决一些按钮和图像的样式问题。我的目标是有一个看起来像按钮如下：

（哈克MSPAINT样机）

Button Example http://www.robhruska.com/images/button-example.png

不过，我有一组标准我想见见：

• 我还需要能够有图标图像单独存在，作为一个按钮，没有文本（即，按钮的背景是图标图像和按钮的宽度/高度=图标图像宽度/高度）。
• 唯一的图标按钮需要支持:hover指出，更改背景图标。
• 文字按钮需要支持渐变背景上:hover改变，但图标本身并没有改变。

我有一个垂直CSS sprite图像中可用的图标图像和渐变图像。

目前，我只能认为与独立的多组样式文本按钮和图标按钮只有做到这一点，沿着线：

<!-- text-button --> 
<!-- button.text-button would have gradient background and border --> 
<!-- button.text-button:hover would change to the hover gradient --> 
<!-- .icon would have the icon background (icon border is included in image) --> 
<button class="text-button"> 
    <div class="icon-delete">Button Text</div> 
</button> 

<!-- icon-only button --> 
<!-- button.icon-button would have the specific icon image background --> 
<!-- button.icon-button:hover would change to the hover state background --> 
<!-- button styling is different than .text-button, since icon border is included in image --> 
<button class="icon-button-delete"></button> 

我特别不喜欢使用内<div>对于文本按钮，因为它似乎增加了可能不必要的更多标记。它也使得如果我想稍后再回来并将文本添加到按钮中，则必须更改多个组件，而不是仅更改按钮类。这也意味着我可能必须为我的图标精灵定义几种不同的按钮/ div样式组合的图像位置，这不是DRY。

总结我的问题：我如何才能在<button>做到这一点有单个顶级风格，而不是使用嵌套元素或单独的样式的icon- VS文本的按钮？它不一定是<button>，它可以是任何元素，如果它完成这个优雅。

我并不真的需要一个完整的代码示例，只是因为它可以如何实现最佳的建议。

Answer 1

你可以使用在最大简化一下：只要使用渐变作为背景，插入插入另一个标签里面的图标为背景，用CSS vertical-align属性（它接受％值）放置正确对齐文本的图标。

，而不是使用div标签考虑使用<b>标签，红外节省ytou一些字节，它是由地那个谷歌的技术。

希望这有助于

Answer 2

可你刚才创建2个独立的按钮元素，并使用绝对定位得到的大按钮的顶部的图标按钮？

Answer 3

可以减少标记一下：

<div class="button"> 
    <a class="yourIcon">Button Text</a> 
</div> 

.button得到梯度图像。

.yourIcon可以根据需要获取背景图标。

Answer 4

就个人而言，我只是使用<img>与透明gif和CSS背景图像，而不是您的图标div。和文本的跨度。对于该按钮的无文本版本，只需省略范围并调整按钮类别即可。

我已经建立了一个示范原油在这里：http://jsfiddle.net/TTyPZ/3/

版本2：http://jsfiddle.net/z9pD9/1/