Как сверстать такие кнопки?

Question

[ryzhak]

Как верстают такие кнопки с практической точки зрения?


Вот есть у меня psd шаблон. На этих кнопках слоем ниже такие же кнопки, но в черно-белом варианте. Как я понимаю при наведении на кнопку изображение должно из черно-белого в цветное переходить.

Собственно вопрос, мне нужно вручную их вырезать из psd шаблона, потом сделать спрайты с цветными и черно-белыми и потом вставлять в html, например тегами a или button с background'ом изображения кнопки?

А тру верстальщики тоже вырезают такие кнопки из шаблона или на глаз через css подгоняют к нужному виду?

Надеюсь вопрос понятен.
Thanks in advance

Answer 1

[Сергей Семенко]

В любом случае нужно отдельно иметь цветные и черно-белые иконки. Выводить можно в виде фона для блока, указав нужную позицию, или вырезать.

Comments

[ryzhak]

А если бы это были обычные цветные кнопки. Их надо было бы вырезать или через css подогнать к нужному виду? Интересно как на практике обычно делают, вырезают такие вещи и вставляют фоном или через css подгоняют к нужному виду? Или и так и так ?

[Сергей Семенко]

ryzhak: я думаю вырезать намного лучше, просто если задавать позицию, то в любом случае весь шаблон загрузится.

Answer 2

[Artem Kom]

можно и на чистом сцц. Нужно только подключить шрифты типа fontawesome а дальше на сцц добавить градиенты, цвета, отступы и тд.

Comments

[Itvanya]

СЦЦ!?СЦЦ???? Быть может сиэсэс?

Answer 3

[Александр]

Еще есть совсем не кроссбраузерное решение на CSS3. Режешь один спрайт и пишешь для него такой стиль:

.social {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
transition: -webkit-filter 0.5s;
}
.social:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}

Comments

[YemSalat]

filter is supported without prefix in Chrome and FireFox 36

[Александр]

YemSalat: в chrome префикс нужен caniuse.com/#search=filter

[YemSalat]

Александр: действительно, прошу прощения, посыпаю голову пеплом

[YemSalat]

Александр: Но просто фильтр для мозиллы все таки стоит добавить

[Александр]

YemSalat: согласен. Добавил.