Круглая градиентная вдавленная кнопка на CSS3 с иконкой из иконочного шрифта в стеке. Поможете?

Question

[xmoonlight]

Всем привет.
Как сделать такую кнопку с произвольным цветом и иконкой из иконочного шрифта?


Спасибо!

Сделал так: https://jsfiddle.net/ydrtg3fa/

Answer 1

[twobomb]

Можно так

Comments

[xmoonlight]

Супер! Только не получается сделать автоматический сайзинг и тень у иконки.

Вот как у fontawesome:

Example: basic icon
If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.

fontawesome.io/examples/#basic

Сам контент (иконку) и основной (опроный) цвет - лучше сделать так, чтобы можно было задавать через тег. Реально?

Answer 2

[Stalker_RED]

Как-то так https://jsfiddle.net/97zeu2zq/
С нормальными цветами и багфиксом https://jsfiddle.net/97zeu2zq/1/
С учетом того, что тень под символом нарисована под 45°, наверное и на кнопке освещение должно соответствовать https://jsfiddle.net/97zeu2zq/3/
С глубиной еще можно поэкспериментировать, сдвигая промежуточный цвет (или цвета).

Вариант с инлайн-блоком https://jsfiddle.net/97zeu2zq/7/

Comments

[twobomb]

Минут 5 сидел пытался представить что это эффект вдавленности, но так и не получилось(

[Stalker_RED]

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

[xmoonlight]

Stalker_RED: Спасибо! box-решение - реально сделать?
(как описано в комменте к ответу twobomb)

[Stalker_RED]

xmoonlight: фонт-сайз можно задавать в родителе. как-то так https://jsfiddle.net/97zeu2zq/4/
Совсем автоматом не получится, разве что скриптами.
Или привзязать размер к чему-то общему, к ширине вьюпорта, например https://jsfiddle.net/97zeu2zq/5/

[Stalker_RED]

xmoonlight: или перейти на svg иконки.

[xmoonlight]

Stalker_RED:

Совсем автоматом не получится, разве что скриптами.

ну вот fontawesome же сделали как-то и даже стек...

[Stalker_RED]

xmoonlight: Это какой-то другой font-awesome?
jsfiddle.net/srow2ckv

[xmoonlight]

Stalker_RED:

<div style="font-size:50px"><i class="fa fa-camera-retro"></i></div>

[Stalker_RED]

xmoonlight: впрочем, если саму кнопку сделать инлайн элементом, и она сможет тянуться в зависимости от размера шрифта
https://jsfiddle.net/97zeu2zq/7/

[xmoonlight]

Stalker_RED: А вот в такой вид:

<i class="fa fa-github foo brown"></i>
<i class="fa fa-github foo red"></i>

как законвертить то, что уже есть?

foo - тип подложки
brown, red, #FFF,#FF00FF - опорный цвет для подложки

[Stalker_RED]

xmoonlight: Типа такого? https://jsfiddle.net/97zeu2zq/8/
Но тогда уже надежнее давать классы типа foo-brown-red
И это неправильно, классы должны называться с каким-то смыслом типа "active", "warning" а не цветами.

[xmoonlight]

Stalker_RED: мне нужны именно цвета, а не состояния, обозначаемые цветом..

[Stalker_RED]

xmoonlight: вы хотите в css параметры передать? Разве что препроцессорами. Ну или на js какой-то костыль.

[xmoonlight]

Stalker_RED: типа какого - я написал же! Ещё раз пишу!
Чтобы можно было так вызывать:
Цвет по-умолчанию: <i class="fa fa-github foo"></i>
или
Красная кнопка: <i class="fa fa-github foo-red"></i>
или

Указанный цвет кнопки: (градиент высчитать - реально в CSS?)

<i class="fa fa-github foo" data-foo-color="#FF00FF"></i>

или так (на крайний случай)
Указанный цвет кнопки:

<i class="fa fa-github foo" data-foo-color-dark="#880088" data-foo-color-light="#FF00FF"></i>

[xmoonlight]

Stalker_RED: attr(), к сожалению пашет только с content :(
сделал вот так: https://jsfiddle.net/ydrtg3fa/