• Автор:

    Flesha
  • Добавлено:

    сен 12, 2014
  • Комментариев:

    0
  • Просмотров:

    1 499

Кнопки социальных сетей для сайта на CSS3

Кнопки социальных сетей для сайта на CSS3

Мы уже не раз рассказывали о важности интеграции социальных сетей на вашем сайте. Они позволят не только увеличить оборот посетителей но и привлечь постоянных читателей сайта, что соответственно увеличит ядро аудитории. В сегодняшнем уроке мы рассмотрим как создать достаточно простые но привлекательные социальные кнопки для сайта, для этого мы будем использовать только CSS, что значительно ускорит загрузку страницы.

В демонстрации мы рассмотрим кнопки для трех основных соц. сетей, а именно: фейсбук, твиттер и набирающая оборотов сеть google+, к каждой их этих социальных кнопок будут предложены три различных цветовых решений. Если Вам необходима красивая анимация, то закройте этот урок сразу, в данном уроке мы рассмотрим минимализм и скорость загрузки. И так, давайте приступим.

Шаг 1. HTML:
<div class='section'>
<div class='inner'>
<a class='btn fb'>
login
<span>
with facebook
</span>
</a>
<a class='btn tw'>
login
<span>
with twitter
</span>
</a>
<a class='btn gp'>
login
<span>
with google+
</span>
</a>
</div>
</div>
<div class='section'>
<div class='inner'>
<a class='btn fb reverse'>
login
<span>
with facebook
</span>
</a>
<a class='btn tw reverse'>
login
<span>
with twitter
</span>
</a>
<a class='btn gp reverse'>
login
<span>
with google+
</span>
</a>
</div>
</div>
<div class='section'>
<div class='inner'>
<a class='btn fb naked'>
login
<span>
with facebook
</span>
</a>
<a class='btn tw naked'>
login
<span>
with twitter
</span>
</a>
<a class='btn gp naked'>
login
<span>
with google+
</span>
</a>
</div>
</div>


С разметкой у вас не должно возникнуть проблем, у нас есть спаны с помещенным в них текстом, кроме этого у нас имеются классы, с присвоенными соответствующими стилями для каждой кнопки.

Шаг 2. CSS:
$btn: #fff;
$fb: #47c;
$tw: #0cf;
$gp: #d43;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:before, :after {
content: '';
display: block;
position: absolute;
box-sizing: border-box;
}
html, body {
height: 100%;
background: #ddd;
}
.inner {
width: 780px;
margin: 0 auto;
}
.inner a {
float: left;
margin: 45px 25px 0;
}
.btn {
position: relative;
display: block;
width: 210px;
height: 40px;
padding: 0 0 0 55px;
font: 700 16px/40px 'Quattrocento Sans', sans-serif;
text-decoration: none;
text-transform: uppercase;
color: #555;
border-radius: 2px;
background: linear-gradient(to bottom, $btn 0%, darken($btn, 10%) 100%);
box-shadow: 0 1px 1px rgba(0,0,0,.5);
cursor: pointer;
}
.btn span {
font-size: 14px;
text-transform: none;
color: #aaa;
}
.btn:before {
top: 0;
left: 0;
width: 40px;
height: 40px;
font: 20px/40px entypo;
text-align: center;
color: #fff;
border-radius: 2px 0 0 2px;
}
.btn.fb:before {
content: '\f30c';
background: linear-gradient(to bottom, $fb 0%, darken($fb, 10%) 100%);
}
.btn.tw:before {
content: '\f309';
background: linear-gradient(to bottom, $tw 0%, darken($tw, 10%) 100%);
}
.btn.gp:before {
content: '\f30f';
background: linear-gradient(to bottom, $gp 0%, darken($gp, 10%) 100%);
}
.btn:hover {
text-shadow: 0 0 10px #fff;
}
/* reverse */
.btn.reverse {
color: #fff;
}
.btn.reverse span {
color: #eee;
}
.btn.fb.reverse {
background: linear-gradient(to bottom, $fb 0%, darken($fb, 10%) 100%);
}
.btn.tw.reverse {
background: linear-gradient(to bottom, $tw 0%, darken($tw, 10%) 100%);
}
.btn.gp.reverse {
background: linear-gradient(to bottom, $gp 0%, darken($gp, 10%) 100%);
}
.btn.reverse:before {
color: #555;
background: linear-gradient(to bottom, $btn 0%, darken($btn, 10%) 100%);
}
/* naked */
.btn.naked:before {
border-right: 1px solid #aaa;
background: none;
}
.btn.fb.naked:before {
color: darken($fb, 5%);
}
.btn.tw.naked:before {
color: darken($tw, 5%);
}
.btn.gp.naked:before {
color: darken($gp, 5%);
}


Вот и все. Готово!

Демонстрация

Внимание! У Вас нет прав для просмотра скрытого текста.
dle
Вернуться
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.