Соц сети значки html

Содержание
  1. Как сверстать и оформить в css кнопки социальных сетей
  2. Разметка и базовые стили
  3. Оформляем иконки
  4. Финальный этап
  5. Что еще можно сделать?
  6. Итог
  7. Еще материалы по HTML
  8. Кнопки соцсетей для сайта на чистом CSS
  9. Кнопки социальных сетей
  10. Набор круглых кнопок
  11. Ссылка на соц сеть
  12. Код CSS
  13. Набор квадратных кнопок
  14. 27 CSS Social Media Icons
  15. Related Articles
  16. Author
  17. Links
  18. Made with
  19. About a code
  20. 3D Social Media Button
  21. Author
  22. Links
  23. Made with
  24. About a code
  25. Social Animation
  26. Author
  27. Links
  28. Made with
  29. About a code
  30. Glass Effect Social Media Buttons with Neon Glow
  31. Author
  32. Links
  33. Made with
  34. About a code
  35. Social Links
  36. Author
  37. Links
  38. Made with
  39. About the code
  40. Dark Social Icons
  41. Author
  42. Links
  43. Made with
  44. About the code
  45. Fancy Hover Animation
  46. Author
  47. Links
  48. Made with
  49. About the code
  50. Social Media Icons
  51. Author
  52. Links
  53. Made with
  54. About the code
  55. 3D — CSS Social Tiles
  56. Author
  57. Links
  58. Made with
  59. About the code
  60. Social Media Icons
  61. Author
  62. Links
  63. Made with
  64. About the code
  65. The Social Drawer
  66. Author
  67. Links
  68. Made with
  69. About the code
  70. Group Button with SVG Icons
  71. Author
  72. Links
  73. Made with
  74. About the code
  75. Social Icons
  76. Author
  77. Links
  78. Made with
  79. About the code
  80. Social Buttons
  81. Author
  82. Links
  83. Made with
  84. About the code
  85. CSS3 Social Buttons Vol.2
  86. Author
  87. Links
  88. Made with
  89. About the code
  90. CSS3 Social Buttons Vol.1
  91. Author
  92. Links
  93. Made with
  94. About the code
  95. Only CSS Direction-Aware Cube Social Links
  96. Author
  97. Links
  98. Made with
  99. About the code
  100. Social Buttons
  101. Author
  102. Links
  103. Made with
  104. About the code
  105. Social Buttons with Tooltips
  106. Author
  107. Links
  108. Made with
  109. About a code
  110. Social Buttons With Icon Fonts
  111. Author
  112. Links
  113. Made with
  114. About the code
  115. Social Connect
  116. Author
  117. Links
  118. Made with
  119. About the code
  120. Clean Social Buttons
  121. Author
  122. Links
  123. Made with
  124. About the code
  125. Stylish Social Buttons
  126. Author
  127. Links
  128. Made with
  129. About the code
  130. SVG Social Icons
  131. Author
  132. Links
  133. Made with
  134. About the code
  135. Social Links
  136. Author
  137. Links
  138. Made with
  139. About the code
  140. Social Media Icons
  141. Author
  142. Links
  143. Made with
  144. About the code
  145. Social Media Icons
  146. Author
  147. Оформление ссылок на социальные сети
  148. Установка ссылок «поделиться» в соц. сетях:
  149. Примеры оформления:
Читайте также:  Java util array to string

Как сверстать и оформить в css кнопки социальных сетей

Приветствую вас на моем блоге. Сегодня я хотел бы вам показать пошагово, как можно сверстать на html и css кнопки социальных сетей. Начнем с полного нуля и в конце получим нужный результат. Вперед!

Разметка и базовые стили

Итак, поскольку мы создаем блок с иконками социальных сетей, то наш блок назовем share (поделиться), так как для этого в основном эти иконки и ставят (хотя иногда это просто ссылки на группы). Далее нужно указать содержимое этого контейнера.
Добавим в html-файл такой код:

В адресах ссылок я просто поставил решетку. Конечно, при использовании в реальности у каждой ссылки должен быть прописан рабочий адрес, по которому осуществится переход.

Допустим, у нас будет 3 социальных сети – Вконтакте, Фейсбук, Твиттер. Перед ними выводим слово, а далее размещаем 3 ссылки. Все они будут иметь одинаковый класс – social , но также каждая гиперссылка получит свой, уникальный класс.

Добавим пока что вот такие стили:

.share <
width: 280px;
margin: 0 auto;
padding: 10px;
background: #D3CDEE;
>
.share i <
margin-right: 15px;
color: black;
text-transform: uppercase;
>

Мы немного оформили сам контейнер для ссылок (размеры, отступы, фон) и надпись.

Оформляем иконки

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

.social <
display: inline-block;
width: 40px;
height: 40px;
background: #bdc3c7;
vertical-align: middle;
margin-right: 10px;
>

Свойством display: inline-block мы сделали так, что наши ссылки преобразовались в блочные элементы, но в то же время сохранили способность стоять в ряд. Далее указываем размеры и отступ справа, чтобы блоки не прилегали слитно друг к другу.

Хорошо, а для чего нам vertical-align: middle ? Это свойство выровняет текст в контейнере так, что он будет ровно по центру по вертикали. Также зададим нашим ячейкам какой-нибудь фон, чтобы визуально видеть их уже на этом этапе. Получилась заготовка. Самое время наконец добавить иконочки.

Финальный этап

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

Короче, нам нужно такое изображение. У меня оно примерно 120 на 40.

В css-стили добавляем следующие правила:

.social-vk <
background: url(icon.png);
>
.social-fb <
background: url(icon.png) -40px 0;
>
.social-tw <
background: url(icon.png) -78px 0;
>

блок социальных сетей

Получаем на выходе полностью оформленный блок с иконками.

Вы поняли, как мы это получили? Если нет, то объясняю. Каждая ссылка блок имеет размер 40 на 40. Соответственно, когда мы задаем для него фоновое изображение 120 на 40, то блок просто не может вместить его полностью, и в результате вмещает столько, сколько может.

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

Записав в фоне так: background: url(icon.png) -40px 0 , мы явно указываем, что для блока social-fb , фоновая картинка должна отобразиться именно с указанного положения – сорока пикселей по ширине влево и по высоте без смещения, потому что оно не нужно. Вот так вот все просто, на самом деле.

Что еще можно сделать?

Может быть, вы еще как-то дополнительно хотите оформить блок социальных сетей. Есть несколько идей. Во-первых, можно добавить всем иконкам скругление углов.

Во-вторых, можно добавить им рамку.

css кнопки социальных сетей

По дизайну нам в данном случае подойдет фиолетовая, мне кажется. Также вы можете скруглить углы у самого контейнера с ссылками.

Опять же, вариантов оформления много. Ну и, конечно, вы легко можете поменять цвета. В этой статье я предлагаю вам такой вариант оформления, но теперь вы легко можете сделать по-своему: желтые, зеленые, красные и любые другие иконки.

Итог

Как видите, даже самостоятельно можно очень легко добавить на сайт социальные кнопки, а помогут нам в этом html и css. По крайней мере, визуально мы наши иконки можем оформить так, как нужно по дизайну каждого конкретного сайта.

На этом я сегодняшнюю статья-урок заканчиваю. В следующий раз создадим на css еще что-нибудь

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший — HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей — 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Источник

Кнопки соцсетей для сайта на чистом CSS

Кнопки социальных сетей для сайта сделанные на чистом CSS с применением иконок Font Awesome. Посмотрите на моё решение — возможно это именно то что вы ищите.

youtube

Социальные сети стали неотъемлемой частью современного интернета. Своим понятным функционалом они массово завлекли пользователей вызвав у них зависимость.

Хочу поделиться с достопочтенной аудиторий кнопками социальных сетей для сайта на чистом CSS и Font Awesome, которые я делал подгоняя стили целый день.

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

Набор круглых кнопок

Посидел денёк подбирая тени и стили для кнопок соцсетей. Теперь вот хочу поделиться с вами своим вариантом круглых кнопочек соцсетей:

Чтобы вставить кнопки на сайт, добавьте через HTML код нужных вам соцсетей.

Для тех кто плохо разбирается в HTML, подскажу что код одной кнопки соцсети состоит из трёх строк.

В классе открывающегося тега div есть названия соцсетей на английском. Ненужные кнопки можно удалить, а нужные отсортировать в том порядке который вас устраивает.

Надеюсь с вставкой HTML-кода кнопок разберётесь.

Ссылка на соц сеть

Теперь чтобы вставить ссылку на ваш профиль, канал или группу — нужно в атрибуте href вместо символа # вставить ссылку на вашу соцсеть. Будьте внимательны чтобы не удалить двойную кавычку, которая должна быть перед и в конце ссылки.

Так же обязательно добавьте CSS, чтобы ваши кнопки работали так же как в моём примере.

Код CSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); .social a < text-align: center; width: 48px; height: 48px; float: left; background: #fff; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1); border-radius: 24px; margin: 0 10px 10px 0; padding: 6px; color: #000; >.github a:hover .youtube a:hover .google-pluse a:hover .twitter a:hover .instagram a:hover .facebook a:hover .skype a:hover .vk a:hover .odnoklassniki a:hover .pinterest a:hover .linkedin a:hover .telegram a:hover .tumblr a:hover .windows a:hover .whatsapp a:hover .weibo a:hover .dropbox a:hover

Первой строкой в данном css идёт подключение иконочного шрифта FontAwesome 4.7.0 через @import . Если FontAwesome уже подключен к вашему сайту, то удалите данную строку.

CSS кнопок добавляется в файл CSS темы или шаблона вашего сайта. Место для вставки кода CSS не принципиально. Можете вставлять код в самый низ файла css с новой строки.

Начиная со строки 15 идут стили для кнопок. Можете удалить ненужные вам соцсети.

Набор квадратных кнопок

Так же если вам не нравятся круглые кнопки, предложу вариант квадратных кнопок:

Источник

27 CSS Social Media Icons

Collection of hand-picked free HTML and CSS social media icon code examples from Codepen, GitHub and other resources. Update of October 2021 collection. 4 new items.

Author

Made with

About a code

3D Social Media Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Social Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, font-awesome.css, font-awesome-animation.css

Author

Made with

About a code

Glass Effect Social Media Buttons with Neon Glow

A CSS only implementation of glass-like neon glow buttons with text gradients & box-shadow s.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS only animation for social links.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Dark Social Icons

Author

Made with

About the code

Dark Social Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Fancy Hover Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Media Icons

Author

Made with

About the code

Social Media Icons

Social media icons with hover and inverse actions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 3D - CSS Social Tiles

Author

Made with

About the code

3D — CSS Social Tiles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Media Icons

Author

Made with

About the code

Social Media Icons

Floating social media icons in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: The Social Drawer

Author

Made with

About the code

The Social Drawer

Just another drawer for your social links.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Group Button with SVG Icons

Author

Made with

About the code

Group Button with SVG Icons

Group button with svg icons, based on dribble project: https://dribbble.com/shots/694671-Buttons-Free-PSD

Demo image: Social Icons

Author

Made with

About the code

Social Icons

Social icons with vision 3D effect in HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Social Buttons

Author

Made with

About the code

Social Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS3 Social Buttons Vol.2

Author

Made with

About the code

CSS3 Social Buttons Vol.2

Social buttons with CSS3 transition s.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS3 Social Buttons Vol.1

Author

Made with

About the code

CSS3 Social Buttons Vol.1

Social buttons with CSS3 transition s.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Only CSS Direction-Aware Cube Social Links

Author

Made with

About the code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Social Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Buttons with Tooltips

Author

Made with

About the code

Social Buttons with Tooltips

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Buttons With Icon Fonts

Author

Made with

About a code

Social Buttons With Icon Fonts

Another set of social buttons for anyone to use/take inspiration from. This set takes advantage of Font Awesome icon pack.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Connect

Author

Made with

About the code

Social Connect

This is a design I found on Dribbble made by Paul Flavius Nechita. It’s a simple design, but it’s one of my favorites. I’ll have to work for a bit to get the box shadows the way it shows in the picture.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Clean Social Buttons

Author

Made with

About the code

Clean Social Buttons

Free HTML and CSS social buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Stylish Social Buttons

Author

Made with

About the code

Stylish Social Buttons

A few cool social buttons with smooth animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: SVG Social Icons

Author

Made with

About the code

SVG Social Icons

Round social icons in SVG, HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Links

Author

Made with

About the code

HTML and CSS social diamond links.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Media Icons

Author

Made with

About the code

Social Media Icons

Social media hover icons with pop-up titles.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Media Icons

Author

Made with

About the code

Social Media Icons

Social media icon reveal with transition .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Flip Cards

Author

Источник

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

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

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

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

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

ВКонтакте
Одноклассники
Twitter

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

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

Вариант 1

Вариант 2

Вариант 3

Вариант 4

Вариант 5

transition : border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s ;

transition : transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s ;

transition : transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s ;

Источник

Оцените статью