Стилизация фонового изображения кнопки, изображения значка кнопки и текста с использованием CSS-спрайтов - PullRequest
Новая
       31

Стилизация фонового изображения кнопки, изображения значка кнопки и текста с использованием CSS-спрайтов

1 голос
/ 26 июня 2010

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

(макет Hacky mspaint)

Пример кнопки http://www.robhruska.com/images/button-example.png

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

  • Мне также нужно, чтобы изображение значка существовало как одна кнопка без текста (т. Е. Фон кнопки - это изображение значка, а ширина / высота кнопки = ширина / высота изображения значка).
  • Кнопка только для значка должна поддерживать :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, что не СУХОЙ.

Подводя итог моему вопросу: Как я могу сделать это с одиночным стилем верхнего уровня на <button>, вместо использования вложенных элементов или отдельных стилей для значков и текстовых кнопок? Это также не обязательно должен быть <button>, это может быть любой элемент, если он выполняет это элегантно.

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

Ответы [ 4 ]

1 голос
/ 12 ноября 2010

Лично я бы просто использовал <img> с прозрачным gif и фоновым изображением CSS вместо вашего значка div. И промежуток для текста. Для текстовой версии кнопки просто не указывайте диапазон и настройте класс кнопки.

Я построил здесь грубую демонстрацию: http://jsfiddle.net/TTyPZ/3/

Версия 2: http://jsfiddle.net/z9pD9/1/

1 голос
/ 26 июня 2010

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

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

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

.yourIcon может получить значок для фона, если это необходимо.

0 голосов
/ 26 июня 2010

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

0 голосов
/ 26 июня 2010

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

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

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

...