html - 带有渐变和箭头的 CSS 动态大小按钮的最佳实践

Question

我正在使用 Zurb Foundation 框架，我正在尝试制作一些号召性用语按钮，这些按钮的大小是动态的，带有文本、背景渐变和向右箭头。

我可以想到三种可能的方法来做到这一点:

1. 让一个 a 元素包裹另一个元素并设置两个背景的样式，使一个具有渐变，另一个具有位于右侧的箭头。

2. 只有一个带有渐变背景的 a 元素，并将箭头作为 img 放在我的 html 中。

3. 使用一个元素和一张背景图片，包括整个元素的渐变和箭头。

这些选项中的每一个都在某种程度上感觉不对 -

1. 我有一个纯粹用于样式目的的非语义 div。

2. 我的 html 中有一个 img，尽管它纯粹是风格化的。

3. 感觉像是一个肮脏的解决方案，尤其是当按钮可缩放时。

这些选项的最佳实践是什么，或者有没有我没有考虑过的方法？我还如何确保按钮在 Zurb 列缩放时与正确位置的文本和箭头很好地缩放？

非常感谢! :)

Answer 1

我不确定我是否完全理解您的问题，但如果您使用的是 Foundation，那么您是否尝试过:

<div class="side-buttons">
    <button id="someid" class="nice [red:green:blue:black] button" onclick="someEvent();"/>
</div>

nice 类添加了一个类似于我相信你正在谈论的渐变。如果我没记错的话，侧边按钮类会继承按钮宽度，即从类为“两列”的嵌套 div 继承，但高度会根据文本进行调整。

希望我能帮到您，也许您可​​以发布一些代码。