Question

我正试图通过一些按钮和图像优雅地解决样式问题。我的目标是让按钮看起来如下所示：

（Hacky mspaint mockup）

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

但是，我有一套我想要满足的标准：

我还需要能够将图标图像作为单独的按钮存在，没有文本（即按钮背景是图标图像，按钮宽度/高度=图标图像宽度/高度）。
只有图标的按钮需要支持更改背景图标的: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

您可以稍微减少标记：

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

.button获取渐变图像。

然后，如果需要， .yourIcon可以获得背景图标。

Answer 2

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

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

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

Answer 3

您可以在最大值时使用简化：只需使用渐变作为背景并插入另一个带有图标作为背景的标记，使用css vertical-align属性（它接受％值）将图标正确地对齐到文本。

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

希望这会有所帮助

Answer 4

你能创建2个单独的按钮元素并使用绝对定位来获取大按钮顶部的图标按钮吗？

使用CSS sprites的样式按钮背景图象，按钮象图象和文本

4 个答案: