使用 CSS 精灵为按钮背景图像、按钮图标图像和文本设置样式

Question

我正在尝试用一些按钮和图像优雅地解决样式问题。我的目标是拥有如下所示的按钮：

（Hacky mspaint 模型）

_{（来源：robhruska.com）}

但是，我想满足一组标准：

• 我还需要能够让图标图像单独作为按钮存在，没有文本（即按钮背景是图标图像，按钮宽度/高度 = 图标图像宽度/高度）。
• 仅图标按钮需要支持更改背景图标的:hover 状态。
• 文字按钮需要支持:hover上的渐变背景变化，但图标本身不需要变化。

我可以在垂直 CSS 精灵图像中使用图标图像和渐变图像。

目前，我只能考虑为文本按钮和纯图标按钮设置单独的样式集，如下所示：

<!-- 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> 上使用单一顶级样式，而不是使用嵌套元素或图标按钮和文本按钮的单独样式？它也不一定非得是<button>，它可以是任何元素，只要它能够优雅地完成这一点。

我并不真正需要完整的代码示例，只是建议如何最好地完成它。

Answer 1

您可以最大程度地使用简化它：只需使用渐变作为背景并在其中插入另一个带有图标作为背景的标签，使用 css 垂直对齐属性（它接受 % 值）将图标与文本正确对齐。

考虑使用<b>标签，而不是使用div标签，ir节省了ytou一些字节，顺便说一句，这是google的技术。

希望对你有帮助

Answer 2

你可以只创建 2 个单独的按钮元素并使用绝对定位将图标按钮放在大按钮的顶部吗？

Answer 3

你可以减少一点标记：

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

.button 获取渐变图像。

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

Answer 4

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

我在这里做了一个粗略的演示：http://jsfiddle.net/TTyPZ/3/

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