Оформление ссылок на социальные сети

Что касается ссылок на профили или группы — там все просто, это обычные ссылки. А вот с ссылками "поделиться" немного посложнее, т.к. там нужно в ней передать адрес текущей страницы.

В этой заметке установка таких ссылок и варианты их оформления.

Установка ссылок "поделиться" в соц. сетях:

Примеры оформления:

Все варианты используют шрифт FontAwesome, но могут использовать и графические иконки (последняя ссылка со смайликом).

Вариант 1
Вариант 2
Вариант 3
Вариант 4
Вариант 5
Вариант 6
Вариант 7
Вариант 8

Цвета социальных сетей:

Я не стал расскрашивать ни кнопки, ни логотипы соц. сетей в их фирменные цвета, т.к. наличие тех или иных сугубо индивидуально, как и само желание красить под них, а не под цвета сайта.

Ниже представлены основные социальные сети и их цвета.

ВКонтакте
Hex: #45668e
RGB: 69, 102, 142
Одноклассники
Hex: #F2720C
RGB: 25, 81, 95
Google+
Hex: #dd4b39
RGB: 221, 75, 57
YouTube
Hex: #bb0000
RGB: 187, 0, 0
Facebook
Hex: #3b5998
RGB: 59, 89, 152
Twitter
Hex: #00aced
RGB: 0, 172, 237
Instagram
Hex: #517fa4
RGB: 81, 127, 164
Vimeo
Hex: #aad450
RGB: 170, 212, 80

Использование кнопок для пагинации страниц:

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

Для этого нужно добавить стиль (например, для варианта 6):

А HTML должен выглядеть следующим образом:

В итоге получим:

Смотрите также:

Логотипы на CSS

Несколько примеров оформления логотипов или заголовков для сайта на CSS

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Рустам:

    Привет!
    Спасибо за очередное интересное решение!
    Выбрал Вариант 7. У меня только одна проблемка возникла. При наведении, цвет иконки не меняется на белый.

    Ответить
    • Alexander:

      У вас Font Awesome иконки?
      Если они шрифтом, то попробуйте тут добавить !important

      .social-icons-7 a:hover {
      border-radius: 0px;
      width: 50px;
      height: 50px;
      color: #FFF!important;
      margin: 5px 11px
      }

      Ответить