Лучшая практика для CSS динамического размера кнопки с градиентом и стрелкой

Question

Я использую фреймворк Zurb Foundation и пытаюсь создать несколько динамических по размеру кнопок призыва к действию с текстом, градиентом фона и стрелкой вправо.

Я могу придумать три возможных способа сделать это:

1. Пусть один элемент обернет другой элемент и стилизирует оба фона таким образом, чтобы у одного был градиент, а у другого - стрелка, расположенная справа.

2. Имейте только элемент с градиентным фоном и поместите стрелку как img в мой html.

3. Используйте один элемент с одним фоновым изображением, включая градиент и стрелку для всего этого.

Каждый из этих вариантов в некотором роде кажется неправильным -

1. У меня несемантический div исключительно для стилевых целей.

2. У меня есть img в моем html, хотя он чисто стилистический.

3. Похоже на грязный раствор, особенно если кнопка масштабируема.

Какова лучшая практика этих опций, или есть метод, который я не рассматривал? Как также убедиться, что кнопка хорошо масштабируется с текстом и стрелкой в ​​нужных местах, как масштаб столбцов Zurb?

Muchos gracias! :)

Answer 1

Я не уверен, что точно понимаю ваш вопрос, но если вы используете Foundation, то пробовали:

<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));
}