Разрабатывая фоновое изображение кнопки, изображение значка кнопки и текст с помощью спрайтов CSS

Question

Разрабатывая фоновое изображение кнопки, изображение значка кнопки и текст с помощью спрайтов CSS

Я пытаюсь изящно решить проблему моделирования с некоторыми кнопками и изображениями. Моя цель состоит в том, чтобы иметь кнопки, которые похожи на следующее:

(Макет Hacky mspaint)

_{(источник: robhruska.com)}

Однако у меня есть ряд критериев, которым я хотел бы соответствовать:

Я также должен смочь иметь изображение значка, существуют как одна только кнопка, без текста (т.е. фон кнопки является изображением значка и кнопкой, width/height = ширина изображения значка / высота).
Кнопка только для значка должна поддерживать :hover состояния, которые изменяют фоновый значок.
Текстовые кнопки должны поддерживать фон градиента, изменяющийся на :hover, но сам значок не должен изменяться.

У меня есть и изображение значка и изображение градиента, доступное мне в вертикальном изображении спрайта CSS.

В настоящее время я могу только думать, чтобы сделать это с отдельными наборами стилей для текстовых кнопок и кнопок только для значка, вроде:

Мне особенно не нравится использовать внутреннее

для текстовой кнопки, так как это, кажется, добавляет больше разметки, которая могла бы быть ненужной. Это также делает его так, чтобы, если бы я хотел возвратиться позже и добавить текст к кнопке, я должен был бы изменить несколько компонентов вместо того, чтобы просто изменить класс кнопки. Это также означает, что я, вероятно, должен определить позиции изображения для своих спрайтов значка для нескольких различных комбинаций стилей кнопки/отделения, который не является DRY.

Суммировать мой вопрос: Как я могу сделать это с единственным стилем верхнего уровня на

1

css hover button css-sprites

задан Glorfindel 31 July 2019 в 01:08

3 ответа

Можете ли вы просто создать 2 отдельных кнопочных элемента и использовать абсолютное позиционирование, чтобы кнопка с пиктограммой располагалась поверх большой кнопки?

0

ответ дан 2 September 2019 в 23:29
поделиться

Другие вопросы по тегам:
css hover button css-sprites

Похожие вопросы:

55
Почему бы не использовать таблицы для разметки в HTML? [закрыто] - 6 November 2018 00:07

36
Как сделать div не больше его содержимого? - 20 September 2015 12:27

30
читать и отображать данные из базы данных в файл excel [дубликат] - 12 March 2018 02:52

30
Использование ширины видовых экранов для размера шрифта, как я могу убедиться, что они относятся к родительскому контейнеру, а не к окну просмотра? [Дубликат] - 30 June 2016 03:39

30
Установите переменную длину текста на фиксированную ширину контейнера с помощью CSS и без JavaScript [duplicate] - 30 June 2016 03:39

30
Получите div, чтобы принять 100% рост, минус заголовок автоматической высоты [дубликат] - 15 July 2015 15:37

30
Что мне не хватает, чтобы сосредоточить этот div / изображения? [Дубликат] - 6 July 2018 20:42

score 1 · Answer 1

Вы можете немного уменьшить разметку:

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

.button получает изображение градиента.

.yourIcon при желании может затем получить значок для фона.

score 0 · Answer 2

Вы можете использовать максимальное упрощение: просто используйте градиент в качестве фона и вставьте другой тег со значком в качестве фона внутри, используйте свойство css vertical-align (оно принимает значения%) для размещения значка правильно выровнен по тексту.

вместо использования тегов div рассмотрите возможность использования тега , он экономит вам несколько байтов, и, кстати, это метод Google.

надеюсь, что это поможет

score 0 · Answer 3

Можете ли вы просто создать 2 отдельных кнопочных элемента и использовать абсолютное позиционирование, чтобы кнопка с пиктограммой располагалась поверх большой кнопки?