3.02.14, 21:53
1 комментарий
  Графика/PSD

Ещё одно оформление для социальных кнопок

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

HTML:

<div class="like l_vk">
<span>ВКонтакте<b class="right">LIKE</b></span><br>
<div class="l_block">[КОД]</div>
</div>

<div class="like l_plus">
<span>Google Plus<b class="right">+1</b></span><br>
<div class="l_block">[КОД]</div>
</div>

<div class="like l_twitter">
<span>Twitter<b class="right">TWEET</b></span><br>
<div class="l_block">[КОД]</div>
</div>

<div class="like l_save">
<span>ВКонтакте<b class="right">SAVE</b></span><br>
<div class="l_block">[КОД]</div>
</div>

<div class="like l_facebook">
<span>Facebook<b class="right">LIKE</b></span><br>
<div class="l_block">[КОД]</div>
</div>


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

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);

Комментарии

  1. Katrin 3 февраля 2014 22:47                    

    Шарман, блин! smile

Напишите своё мнение