1

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

（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>，它可以是任何元素，如果它优雅地完成了这一点。

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

4

4 回答 4

1

您可以稍微减少标记：

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

.button 获取渐变图像。

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

于 2010-06-25T20:49:06.990 回答
1

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

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

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

于 2010-11-12T20:34:45.760 回答
0

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

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

希望这可以帮助

于 2010-06-25T20:15:07.887 回答
0

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

于 2010-06-25T20:40:47.537 回答