DataLife Engine > Версия для печати > Ещё одно оформление для социальных кнопок

01.05.2015
Datalife Engine
Хотя похожее оформление блока для социальных кнопок уже гуляет в интернет я все равно его выкладываю.

HTML:


ВКонтактеLIKE

[КОД]



Google Plus+1

[КОД]



TwitterTWEET

[КОД]



ВКонтактеSAVE

[КОД]



FacebookLIKE

[КОД]

[КОД] — заменяем на ваш код

CSS:

.like {
width: 20%;
float: left;
}

.like .l_block {
width: 100%;
height: 22px;
padding: 5px;
background: rgba(255,255,255,0.5);
}

.like span {padding: 5px}

.like span, .like span b {
padding: 0 5px 0 5px;
font: 30px 'Open Sans Condensed', Arial, sans-serif;
font-weight: bold;
text-shadow: black 1px 1px 0;
color: #fff;
}

.l_vk {background: #6D8DB1}
.l_plus {background: #D84E30}
.l_twitter {background: #0091C9}
.l_save {background: #6D8FB3}
.l_facebook {background: #3B579D}

Если хотите что бы шрифт текста был таким же как и на изображение то добавьте в CSS стили:

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic);

Вернуться назад

Метки: