- Как сверстать и оформить в css кнопки социальных сетей
- Разметка и базовые стили
- Оформляем иконки
- Финальный этап
- Что еще можно сделать?
- Итог
- Еще материалы по HTML
- 27 CSS Social Media Icons
- Related Articles
- Author
- Links
- Made with
- About a code
- 3D Social Media Button
- Author
- Links
- Made with
- About a code
- Social Animation
- Author
- Links
- Made with
- About a code
- Glass Effect Social Media Buttons with Neon Glow
- Author
- Links
- Made with
- About a code
- Social Links
- Author
- Links
- Made with
- About the code
- Dark Social Icons
- Author
- Links
- Made with
- About the code
- Fancy Hover Animation
- Author
- Links
- Made with
- About the code
- Social Media Icons
- Author
- Links
- Made with
- About the code
- 3D — CSS Social Tiles
- Author
- Links
- Made with
- About the code
- Social Media Icons
- Author
- Links
- Made with
- About the code
- The Social Drawer
- Author
- Links
- Made with
- About the code
- Group Button with SVG Icons
- Author
- Links
- Made with
- About the code
- Social Icons
- Author
- Links
- Made with
- About the code
- Social Buttons
- Author
- Links
- Made with
- About the code
- CSS3 Social Buttons Vol.2
- Author
- Links
- Made with
- About the code
- CSS3 Social Buttons Vol.1
- Author
- Links
- Made with
- About the code
- Only CSS Direction-Aware Cube Social Links
- Author
- Links
- Made with
- About the code
- Social Buttons
- Author
- Links
- Made with
- About the code
- Social Buttons with Tooltips
- Author
- Links
- Made with
- About a code
- Social Buttons With Icon Fonts
- Author
- Links
- Made with
- About the code
- Social Connect
- Author
- Links
- Made with
- About the code
- Clean Social Buttons
- Author
- Links
- Made with
- About the code
- Stylish Social Buttons
- Author
- Links
- Made with
- About the code
- SVG Social Icons
- Author
- Links
- Made with
- About the code
- Social Links
- Author
- Links
- Made with
- About the code
- Social Media Icons
- Author
- Links
- Made with
- About the code
- Social Media Icons
- Author
- Как сделать — Кнопки социальных сетей
- Кнопки социальных сетей
- Создать кнопки социальных сетей
- Пример
- Square Пример
- Круглая кнопка
- Rounded Пример
- ВЫБОР ЦВЕТА
- Сообщить об ошибке
- Ваше предложение:
- Спасибо Вам за то, что помогаете!
- Оформление ссылок на социальные сети
- Установка ссылок «поделиться» в соц. сетях:
- Примеры оформления:
Как сверстать и оформить в 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 , фоновая картинка должна отобразиться именно с указанного положения – сорока пикселей по ширине влево и по высоте без смещения, потому что оно не нужно. Вот так вот все просто, на самом деле.
Что еще можно сделать?
Может быть, вы еще как-то дополнительно хотите оформить блок социальных сетей. Есть несколько идей. Во-первых, можно добавить всем иконкам скругление углов.
Во-вторых, можно добавить им рамку.
По дизайну нам в данном случае подойдет фиолетовая, мне кажется. Также вы можете скруглить углы у самого контейнера с ссылками.
Опять же, вариантов оформления много. Ну и, конечно, вы легко можете поменять цвета. В этой статье я предлагаю вам такой вариант оформления, но теперь вы легко можете сделать по-своему: желтые, зеленые, красные и любые другие иконки.
Итог
Как видите, даже самостоятельно можно очень легко добавить на сайт социальные кнопки, а помогут нам в этом html и css. По крайней мере, визуально мы наши иконки можем оформить так, как нужно по дизайну каждого конкретного сайта.
На этом я сегодняшнюю статья-урок заканчиваю. В следующий раз создадим на css еще что-нибудь
Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший — HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей — 4.8 из 5. Пусть вашим сайтам будет хорошо.
Еще материалы по HTML
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.
Related Articles
Author
Links
Made with
About a code
3D Social Media Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
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
Links
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
Links
Made with
About a code
Social Links
CSS only animation for social links.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Dark Social Icons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Fancy Hover Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Social Media Icons
Social media icons with hover and inverse actions.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
3D — CSS Social Tiles
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Social Media Icons
Floating social media icons in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
The Social Drawer
Just another drawer for your social links.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
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
Author
Links
Made with
About the code
Social Icons
Social icons with vision 3D effect in HTML and CSS.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About the code
Social Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
CSS3 Social Buttons Vol.2
Social buttons with CSS3 transition s.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
CSS3 Social Buttons Vol.1
Social buttons with CSS3 transition s.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Only CSS Direction-Aware Cube Social Links
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Social Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Social Buttons with Tooltips
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
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
Author
Links
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
Author
Links
Made with
About the code
Clean Social Buttons
Free HTML and CSS social buttons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Stylish Social Buttons
A few cool social buttons with smooth animations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
SVG Social Icons
Round social icons in SVG, HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Social Links
HTML and CSS social diamond links.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Social Media Icons
Social media hover icons with pop-up titles.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Social Media Icons
Social media icon reveal with transition .
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Как сделать — Кнопки социальных сетей
Узнать, как стилизовать кнопки социальных сетей с помощью CSS.
Кнопки социальных сетей
Создать кнопки социальных сетей
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Square Пример
/* Стиль все шрифты иконок */
.fa padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
>
/* Добавить эффект наведения, если вы хотите */
.fa:hover opacity: 0.7;
>
/* Установите определенный цвет для каждого бренда */
/* Facebook */
.fa-facebook background: #3B5998;
color: white;
>
/* Twitter */
.fa-twitter background: #55ACEE;
color: white;
>
Круглая кнопка
Совет: Добавить border-radius:50% для создания круглых кнопок и уменьшения width :
Rounded Пример
.fa <
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
>
Совет: Зайдите на наш учебник Иконки, чтобы узнать больше о значках.
Зайдите на наш учебник CSS Кнопки, чтобы узнать больше о том, как стилизовать кнопки.
Мы только что запустили
SchoolsW3 видео
ВЫБОР ЦВЕТА
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
Оформление ссылок на социальные сети
Что касается ссылок на профили или группы — там все просто, это обычные ссылки. А вот с ссылками «поделиться» немного посложнее, т.к. там нужно в ней передать адрес текущей страницы.
В этой заметке установка таких ссылок и варианты их оформления.
Установка ссылок «поделиться» в соц. сетях:
ВКонтакте
Одноклассники
Примеры оформления:
Все варианты используют шрифт 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 ;