Социальный медиа кнопки с использованием CSS3.

Опубликовано: 12 августа, 2011

Автор: Антон Краморов

Дорогой друг тебя наверно уже тоже надоело видеть однотипные кнопки социальных закладок на блогах рунета.

Всё таки охота как то выделиться, а не быть очередным блогом клоном. Если так, то эта статья для вас. Я расскажу и покажу вам, как создать уникальные кнопки социальных закладок на основе таблиц каскадных стилей CSS3.

CSS3 действительно впечатляет. Это дает веб-дизайнерам возможность создавать гибкие и легкие используемые элементы дизайна, а также снижает нашу зависимость от изображений и графических редакторов.
Вот примеры и исходники:

Вдохновение

Однажды я наткнулся на персональный сайт Луи Harboe, в Graphicpeel и заметил, что у него простые, но очень красиво оформленные социальные кнопки в нижней части страницы, они просто сводили меня с ума. Я подумал про себя, а может попробовать сделать тоже самое используя только CSS3. И мне удалось!

HTML

Во-первых, мы создадим основу с некоторыми простыми тэгами HTML. Мы хотим использовать неупорядоченный список (<ul>), с каждой кнопкой будет элемент списка (<li>).

Внутри каждого тега <li>, мы будем иметь ссылку (<a>). Каждая ссылка будет <img> внутри него, которая представляет значок социальной сети, а также <span> для сохранения текста для кнопки (которая будет “LinkedIn”, “Facebook”, и так далее). Социальные иконки, которые я использовал от Handycons.

Ваш HTML должен выглядеть примерно следующим:

<div class="inset">
<ul>
	<li><a href="mailto:ansarob@gmail.com"> <span class="site">E-Mail</span> </a></li>
	<li><a title="My LinkedIn Page" href="http://linkedin.com"> <span class="site">LinkedIn</span> </a></li>
	<li><a title="My Facebook Page" href="http://facebook.com"> <span class="site">Facebook</span> </a></li>
	<li><a title="My Twitter Page" href="http://twitter.com"> <span class="site">Twitter</span> </a></li>
	<li><a title="My Flickr Page" href="http://flickr.com"> <span class="site">Flickr</span> </a></li>
</ul>
</div>

CSS

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

Основной CSS

Приведем к нашим кнопкам некоторые основные стили. Следующий блок кода просто использует спецификации CSS2, которая даст нам хороший резерв для браузеров, который не имеет поддержки CSS3 спецификации (постепенного улучшения).

Ниже смотрим css код:

.inset {
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 14px;
  list-style-type: none;
  margin: 10px 0 0 10px;
}
.inset ul { list-style-type: none; display: block; }
 
.inset li {
  float: left;
  height: 30px;
  margin: 0 8px 7px 0;
}
 
.inset li a {
  background-color: gray;
  color: #424242;
  float: left;
  font-size: 16px;
  font-weight: bold;
  height: 24px;
  padding-left: 27px;
  padding-top: 6px;
  position: relative;
  text-decoration: none;
  border: 1px solid #bfc1c6;
}
 
.inset li a:hover {
  border: 1px solid #b4b7bb;
}
 
.inset li a img {
  height: 16px;
  left: 7px;
  margin-right: 7px;
  position: absolute;
  top: 7px;
  width: 16px;
    border: none;
}
 
.inset li a span {
  display: block;
  height: 22px;
  padding-right: 7px;
  overflow: hidden;
  /* width: 70px; Уберите это, чтобы добавить фиксированную ширину */
}
 
span.site { font-size: 14px; line-height: 20px; }

То, что мы сделали до сих пор является довольно скучным, но это и следовало ожидать, так как мы ещё не использовали CSS3.

Cоциальные кнопки с использованием css3

Закругленные углы с CSS3

Для того, чтобы эти кнопки выглядели немного более стильными, давайте дадим им немного закругленния углам с использованием границ радиуса собственности. Имейте в виду, что мы должны использовать поставщика специфических расширений браузера Mozilla (-МОЗ-для браузеров, таких как Firefox, SeaMonkey и Flock) и WebKit (-WebKit-для браузеров, таких как Safari и Chrome). Другие браузеры, такие как Opera и IE9 будут признать границы радиуса собственность без поставщика префиксов.

Добавить эти свойства для вставки селектора:

/* Mozilla browsers that use Gecko layout engine */
-moz-border-radius: 5px;
/* Safari and Chrome that use WebKit layout engine */
-webkit-border-radius: 5px;
/* W3C CSS Level 3.0 specifications. For Opera and IE9 */
border-radius: 5px;

Цветовые градиенты с CSS3

В CSS3 с помощью градиентов, мы можем сделать некоторые довольно интересные вещи, которые в противном случае необходимо будет делать в CSS фона изображения, созданные в графическом редакторе, как Photoshop. CSS3 позволяет нам добавить к цвету градиента любой HTML-элемент, который может привести к многим интересным вещам, таким как CSS3 шаблоны проектирования и иллюстративной визуализации.

Чтобы создать градиент на наши кнопки, мы будем использовать синтаксис значение градиента (i.e. linear-gradient() and gradient()) .

Реализация для Mozill(ы) браузера и WebKit браузера разные, поэтому, хотя мы пытаемся сделать то же самое, код будет различным для каждого движка браузера

Заметим, что для Mozilla (-МОЗ-), я использовал процент, тогда как для WebKit (-WebKit-) я должен использовать десятичные дроби, 1% в Mozilla является 0,01 в WebKit, 10% в Mozilla эквивалентно 0,10 в WebKit , и так далее.

Добавьте эти стили к вставке ли селектор:

/* Mozilla browsers that use Gecko layout engine */
background: -moz-linear-gradient(#a5a7aa, #bec1c5 1%, #d8dbdf 10%, #d8dbdf);
/* Safari and Chrome that use WebKit layout engine */
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #a5a7aa),color-stop(.01, #bec1c5),color-stop(.10, #d8dbdf),color-stop(1, #d8dbdf));

Стилизация: hover Псевдо-класс

Давайте пойдем дальше и изменим вид кнопки, когда пользователь наводит на неё курсор. Изменяя до градиент цвета совсем чуть-чуть, когда пользователь наводит мышь на одну из кнопок, мы можем дать ей визуальный сигнал, что он является интерактивным. Если вы хотите, чтобы кнопки выглядели ещё более визуально привлекательнее, вы можете поэкспериментировать с CSS3 функциями преобразования.

Добавьте эти стили .inset li a:hover selector:

background: -moz-linear-gradient(#9c9fa2, #b4b7bb 1%, #cdd0d5 10%, #cdd0d5);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9c9fa2),color-stop(.01, #b4b7bb),color-stop(.10, #cdd0d5),color-stop(1, #cdd0d5));

На изображении ниже, я навёл кнопку на электронную почту. Как вы можете видеть, эта немного темнее, чем другие.

Альтернативные Результат: “”Outset” Кнопки с разными цветами

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

HTML

В этом примере нам нужно изменить класс содержащие делений div от начала insert на outset-colored.

Кроме того, поскольку каждая кнопка будет разного цвета, мы должны также дать им уникальный класс. Мы можем присвоить эти классы длятега, например, Facebook будет иметь класс = “facebook”. Вам наверное интересно очему я решил использовать атрибут класса по сравнению с атрибутом ID: Это потому что я хочу объяснить ситуацию, в которой несколько кнопок такого же класса может появиться на одной странице.

Вот HTML:

CSS

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

Вот CSS альтернативный результат:

.outset-colored {
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 14px;
  list-style-type: none;
  margin: 10px 0 0 10px;
}
 
.outset-colored ul { list-style-type: none; display: block; }
 
.outset-colored li {
  float: left;
  height: 30px;
  margin: 0 8px 7px 0;
}
 
.outset-colored li a {
  color: #424242;
  float: left;
  font-size: 16px;
  font-weight: bold;
  height: 24px;
  padding-left: 27px;
  padding-top: 6px;
  position: relative;
  text-decoration: none;
  border: 1px solid #bfc1c6;
  border-radius: 5px;
  background-color: #D8D9DD;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
 
/* EMAIL */
.outset-colored li a.email {
  background: -moz-linear-gradient(#ff6666, #cc0000 10%, #c40202);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff6666),color-stop(.10, #cc0000),color-stop(1, #c40202));
  color: #f3f3f3;
  border: 1px solid #c40202;
}
 
.outset-colored li a:hover.email {
  background: -moz-linear-gradient(#c40202, #cc0000 1%, #e03434 10%, #e03434);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c40202),color-stop(.01, #cc0000),color-stop(.10, #e03434),color-stop(1, #e03434));
}
 
/* LINKEDIN */
.outset-colored li a.linkedin {
  background: -moz-linear-gradient(#7cd0fb, #38a5dc 10%, #2c83ae);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7cd0fb),color-stop(.10, #38a5dc),color-stop(1, #2c83ae));
  color: #f3f3f3;
  border: 1px solid #2c83ae;
}
 
.outset-colored li a:hover.linkedin {
  background: -moz-linear-gradient(#2c83ae, #38a5dc 1%, #41b9f6 10%, #41b9f6);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2c83ae),color-stop(.01, #38a5dc),color-stop(.10, #41b9f6),color-stop(1, #41b9f6));
}
 
/* FACEBOOK */
.outset-colored li a.facebook {
  background: -moz-linear-gradient(#7aa3f7, #4c72c3 10%, #3b5998);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7aa3f7),color-stop(.10, #4c72c3),color-stop(1, #3b5998));
  color: #f3f3f3;
  border: 1px solid #3b5998;
}
 
.outset-colored li a:hover.facebook {
  background: -moz-linear-gradient(#3b5998, #4c72c3 1%, #5c8aea 10%, #5c8aea);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3b5998),color-stop(.01, #4c72c3),color-stop(.10, #5c8aea),color-stop(1, #5c8aea));
}
 
/* TWITTER */
.outset-colored li a.twitter {
  background: -moz-linear-gradient(#8ae0fd, #24bce6 10%, #1e9ec1);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #8ae0fd),color-stop(.10, #24bce6),color-stop(1, #1e9ec1));
  color: #f3f3f3;
  border: 1px solid #1e9ec1;
}
 
.outset-colored li a:hover.twitter {
  background: -moz-linear-gradient(#1e9ec1, #24bce6 1%, #33ccff 10%, #33ccff);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #24bce6),color-stop(.01, #33ccff),color-stop(.10, #33ccff),color-stop(1, #33ccff));
}
 
/* FLICKR */
.outset-colored li a.flickr {
  background: -moz-linear-gradient(#fc75ba, #e10374 10%, #c10263);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fc75ba),color-stop(.10, #e10374),color-stop(1, #c10263));
  color: #f3f3f3;
  border: 1px solid #c10263;
}
 
.outset-colored li a:hover.flickr {
  background: -moz-linear-gradient(#c10263, #e10374 1%, #ff0283 10%, #ff0283);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c10263),color-stop(.01, #e10374),color-stop(.10, #ff0283),color-stop(1, #ff0283));
}
 
.outset-colored li a img {
  height: 16px;
  left: 7px;
  margin-right: 7px;
  position: absolute;
  top: 7px;
  width: 16px;
   border: none;
}
 
.outset-colored li a span {
  display: block;
  height: 22px;
  padding-right: 7px;
  overflow: hidden;
  /*width: 70px; Add a width here if you want all the buttons to be the same size.*/
}
 
span.site { font-size: 14px; line-height: 20px; }

.outset-colored { font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 14px; list-style-type: none; margin: 10px 0 0 10px; } .outset-colored ul { list-style-type: none; display: block; } .outset-colored li { float: left; height: 30px; margin: 0 8px 7px 0; } .outset-colored li a { color: #424242; float: left; font-size: 16px; font-weight: bold; height: 24px; padding-left: 27px; padding-top: 6px; position: relative; text-decoration: none; border: 1px solid #bfc1c6; border-radius: 5px; background-color: #D8D9DD; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* EMAIL */ .outset-colored li a.email { background: -moz-linear-gradient(#ff6666, #cc0000 10%, #c40202); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff6666),color-stop(.10, #cc0000),color-stop(1, #c40202)); color: #f3f3f3; border: 1px solid #c40202; } .outset-colored li a:hover.email { background: -moz-linear-gradient(#c40202, #cc0000 1%, #e03434 10%, #e03434); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c40202),color-stop(.01, #cc0000),color-stop(.10, #e03434),color-stop(1, #e03434)); } /* LINKEDIN */ .outset-colored li a.linkedin { background: -moz-linear-gradient(#7cd0fb, #38a5dc 10%, #2c83ae); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7cd0fb),color-stop(.10, #38a5dc),color-stop(1, #2c83ae)); color: #f3f3f3; border: 1px solid #2c83ae; } .outset-colored li a:hover.linkedin { background: -moz-linear-gradient(#2c83ae, #38a5dc 1%, #41b9f6 10%, #41b9f6); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2c83ae),color-stop(.01, #38a5dc),color-stop(.10, #41b9f6),color-stop(1, #41b9f6)); } /* FACEBOOK */ .outset-colored li a.facebook { background: -moz-linear-gradient(#7aa3f7, #4c72c3 10%, #3b5998); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7aa3f7),color-stop(.10, #4c72c3),color-stop(1, #3b5998)); color: #f3f3f3; border: 1px solid #3b5998; } .outset-colored li a:hover.facebook { background: -moz-linear-gradient(#3b5998, #4c72c3 1%, #5c8aea 10%, #5c8aea); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3b5998),color-stop(.01, #4c72c3),color-stop(.10, #5c8aea),color-stop(1, #5c8aea)); } /* TWITTER */ .outset-colored li a.twitter { background: -moz-linear-gradient(#8ae0fd, #24bce6 10%, #1e9ec1); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #8ae0fd),color-stop(.10, #24bce6),color-stop(1, #1e9ec1)); color: #f3f3f3; border: 1px solid #1e9ec1; } .outset-colored li a:hover.twitter { background: -moz-linear-gradient(#1e9ec1, #24bce6 1%, #33ccff 10%, #33ccff); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #24bce6),color-stop(.01, #33ccff),color-stop(.10, #33ccff),color-stop(1, #33ccff)); } /* FLICKR */ .outset-colored li a.flickr { background: -moz-linear-gradient(#fc75ba, #e10374 10%, #c10263); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fc75ba),color-stop(.10, #e10374),color-stop(1, #c10263)); color: #f3f3f3; border: 1px solid #c10263; } .outset-colored li a:hover.flickr { background: -moz-linear-gradient(#c10263, #e10374 1%, #ff0283 10%, #ff0283); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c10263),color-stop(.01, #e10374),color-stop(.10, #ff0283),color-stop(1, #ff0283)); } .outset-colored li a img { height: 16px; left: 7px; margin-right: 7px; position: absolute; top: 7px; width: 16px; border: none; } .outset-colored li a span { display: block; height: 22px; padding-right: 7px; overflow: hidden; /*width: 70px; Add a width here if you want all the buttons to be the same size.*/ } span.site { font-size: 14px; line-height: 20px; }

P.S.

Я решил не отставать от моды и сделать у себя на блоге такие же кнопки, но со своей модернизацией;)

1)Поставил наши отечественные кнопки, такие как Вконтакте, Мой мир, Твиттер и Живой журнал, оставив только почтовую подписку

2)Внес изменения в Html код, добавил тэги <noindex> и rel=”nofollow”, чтоб не индексировались ссылки.

3) Ну и конечно прямые ссылки на социальные закладки.

Качаем кнопки и копируем Html код:

<div class="inset">
<ul>
	<li><a href="mailto:ansarob@gmail.com" rel="nofollow" target="_blank">  <span class="site">E-Mail</span> </a></li>
	<li><a title="Мой мир" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>'" rel="nofollow" target="_blank">  <span class="site">Мой мир</span> </a></li>
	<li><a title="Моя страница Вконтакте" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" rel="nofollow" target="_blank">  <span class="site">Вконтакте</span></a></li>
	<li><a title="Моя страница twtter" href="http://twitter.com/home?status=Currently чтении Webgrrls:??? <PHP the_title ();> <PHP эхо get_tiny_url (post_permalink ($ ID));>" rel="nofollow" target="_blank">  <span class="site">Twitter</span> </a></li>
	<li><a title="Мой живой журнал" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&amp;subject=<?php the_title(); ?>" rel="nofollow" target="_blank"> <span class="site">Живой журнал</span></a></li>
</ul>
</div>

Только не забудьте изменить jonnyit.ru на свой сайт.

Не забудь подписаться на мою Rss-ку, а то пропустишь ещё чего интересного.

Разработка сайта

Мы не используем платные CMS и за счет этого мы привлекаем низкой ценой клиентов. Не используем шаблоны у нас только уникальный дизайн. В подарок мы делаем SEO оптимизацию сайта и настройку контекстной рекламы.

Заказать

Продвижение сайта

Частный оптимизатор выходит гораздо дешевле web-студии. Я помогу вам вывести cайт в ТОП-3 и настроить автоматические продажи. В стоимость услуг входит аудит, техническая и seo оптимизация сайта.

Заказать

БЛОГ под КЛЮЧ

Сэкономьте годы возни на созданием и продвижением своего блога. Отдайте это дело блоггеру с пятилетним стажем. В услугу уже входит SEO оптимизация блога. В подарок вы получаете видео-курс «Мой авторитетный блог»

Заказать

11 комментариев

Павка 26 августа, 2011 в 09:15

где фейсбук? 😀

Ответить на комментарий →
- Антон Краморов 26 августа, 2011 в 09:28
  
  в начале статьи ссылка “download source” вот там изначальные исходники с фэйсбуком))
  
  Ответить на комментарий →
Gosha_trade 27 августа, 2011 в 08:38

СПС афтару за нежадность. Нравятся статьи с конкретикой.

Ответить на комментарий →
- Антон Краморов 28 августа, 2011 в 04:03
  
  Всегда ваш покорный слуга)
  
  Ответить на комментарий →
Бабай 28 августа, 2011 в 08:22

Качаем кнопки и копируем Html код: код куда поставить то, не пойму однако.

Ответить на комментарий →
NMitra 27 января, 2012 в 08:13
```
border-radius для Мозилы, не надо префикса.
```
Ответить на комментарий →
Даниил 28 января, 2012 в 07:25

да блин, css надо учить, а то мои знания в этом деле уж оч малы, а без него никуда

Ответить на комментарий →
NMitra 28 января, 2012 в 07:37

А коли сам дописывать код не будешь, зачем он нужен-то?

Ответить на комментарий →
Spirit 21 мая, 2012 в 04:10

Файл удалён:(

Ответить на комментарий →
Александр Василенко 12 мая, 2013 в 01:39

Пока еще рано использовать стандарты CSS3, процентов тридцать посетителей несмогут увидеть результат работы.

Ответить на комментарий →
Юрий 08 июля, 2013 в 10:13

Хотелось бы, чтобы кнопки крутились)

Ответить на комментарий →

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

Как покупать ссылки?	Отзыв о лучшем хостинге
Как правильно вести свой блог?	Правильный распорядок дня
Как оформить паблик Вконтакте?	Как воруют с пластиковых карт?