Черно-белые соц.закладки

Я заметила, что очень многие не хотят от них избавляться, но все что могут — изменить фон иконок. Короче, решила все таки предложить вам еще такой вариант, наеюсь моя идея понравится. Я сделала их больше не полупрозрачными, как обычно, добавила черно-белый фильтр и рамку с эффектом стеклянной кнопки. ) Но есть один косяк… на Хроме точно работает, а с остальными могут быть маленькие проблемы.


CSS

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

#share42 {display: inline-block; padding: 6px 0 0 6px; background: transparent; border: none;margin-bottom:15px}#share42:hover {background: transparent; border: none; box-shadow: 0 0 5px transparent;}

Ставим обычной прозрачности (непрозрачным), добавляем наш фильтр и рамку.
#share42 a {
opacity: 1; 
-webkit-filter: grayscale(100% );
 
border: 1px solid rgba(0,0,0,0.5);
   
border-radius: 10px 10px;
   
box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px 
rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);   -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);   -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);   -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);}

Завершием остальное.

#share42:hover a {opacity: 1;}
#share42 a:hover {opacity: 1;}

Спасибо за внимание! )


Обсудить у себя 10
Комментарии (12)

У меня почему-то не выходит… вообще нет соц.кнопок ни в каком варианте

т е совсем пропали? да уж, странно. фильтр может не везде работать, но рамка и тени... 

я попробовала скопировать и вставить. работает. без понятия почему у тебя выпендривается. //

кстати, спасибо за код)

да не за что ) одно с другим скрестила всего-то...

Я почему то у других вижу, а у себя даже стандартных не вижу..

а они до этого у тебя были? в смысле, может в дизайне автор их убрал. (если его не ты делала)
тогда код посмотреть надо и убрать none

Не я делала… а как убрать не знаю)

скинь мне ссылку на него в личку
или скопируй и в вк

Сейчас)

у меня всё работает)
попробуй вставить в дополнительный css он перебивает основной, возможно в  основном коде что-то противоречит) 

точно. дело говорит )

У меня даже стандартные куда-то исчезли

Чтобы комментировать надо зарегистрироваться или если вы уже регистрировались войти в свой аккаунт.

Войти через социальные сети: