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

Question

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

我可以想到三种可行的方法：

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

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

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

这些选项中的每一个在某种程度上都是错误的 -

1. 我有一个非语义div纯粹是出于风格目的。

2. 我的html中有一个img，尽管它纯粹是文体。

3. 感觉就像一个肮脏的解决方案，特别是如果按钮是可扩展的。

这些选项的最佳做法是什么，还是有一种我没有考虑过的方法？当Zurb Columns缩放时，我如何确保按钮与正确位置的文本和箭头很好地对齐？

Muchos gracias！ ：）

Answer 1

我不确定我是否完全理解你的问题，但如果你正在使用基金会，那么你试过了吗？

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

漂亮的课程增加了一个类似于我认为你所说的渐变。如果我没记错的话，侧按钮类会保持按钮宽度的继承，即来自带有“两列”类的嵌套div，但高度会根据文本进行调整。

希望我有所帮助，也许你可以用你所拥有的东西发布一些代码。

Answer 2

对于Firefox和Webkit，您可以使用CSS3多种背景语法通过css应用渐变和背景图像。

.gradAndImg {
    background-image: url(image.png), -moz-linear-gradient(top, #ffcc00, #ffffff);
    background-image: url(image.png), -webkit-gradient(linear, left-top, left-bottom, from(#ffcc00), to(#ffffff));
}