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

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 и политика конфиденциальности.

Источник

CSS3 кнопки социальных сервисов

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

Иконки созданы при помощи иконочного шрифта, сгенерированного в сервисе IcoMoon.io, подробнее об этом Вы можете ознакомиться в данной статье.

Пример CSS3 кнопок различных социальных сервисов

Иконки социальных сервисов

Для того, чтобы подключить к сайту иконки социальных сервисов, необходимо скачать приложенный архив и распаковать его содержимое в следующую директорию Вашего сайта: /templates/шаблон/fonts . В итоге получается 4 файла иконочного шрифта и 1 css файл, размещающий в себе код вывода иконок.

В исполняемом файле шаблона, который в большинстве случаев находится по следующему пути: /templates/шаблон/index.php , прописываем между тегами . код подключения css файла:

Если Вы используете шаблон от студии Yootheme, то исполняемый файл шаблона и путь к нему будут следующими: /templates/шаблон/layouts/theme.php

Кнопки социальных сервисов

Половина дела сделана — иконочный шрифт подключен к сайту, осталось создать кнопки и вывести через них иконки социальных сервисов.

HTML разметка кнопок социальных сервисов

/*Кнопка Яндекс*/ /*Кнопка Google+*/ /*Кнопка "Одноклассники"*/ /*Кнопка Мейл.ру*/ /*Кнопка Вконтакте (малый логотип)*/ /*Кнопка Вконтакте (международный логотип)*/ /*Кнопка Facebook*/ /*Кнопка Twitter*/ /*Кнопка Instagram*/ /*Кнопка Youtube*/ /*Кнопка Youtube (значок)*/ /*Кнопка Vimeo*/ /*Кнопка Twich*/ /*Кнопка Whatsapp*/ /*Кнопка Skype*/

CSS стили кнопок социальных сервисов

.social-button < -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; border-radius: 50%; //скругление углов кнопки width: 54px; //размер кнопки по ширине height: 54px; //размер кнопки по высоте background: #118EC7; //цвет кнопки в статичном виде border: none; line-height: 54px; color: #fff; //цвет иконки в статичном виде font-size: 27px; //размер иконки text-align: center; /* Скорость анимации */ -webkit-transition: box-shadow .2s ease-out, background-color .2s ease-out; -moz-transition: box-shadow .2s ease-out, background-color .2s ease-out; transition: box-shadow .2s ease-out, background-color .2s ease-out; margin-bottom: 10px; -webkit-user-select: none; >.social-button:hover, .social-button:focus < text-decoration: none!important; background-color: rgba(255, 255, 255, 0); //фон кнопки при наведении курсора color: #118EC7; //цвет иконки при наведении курсора text-decoration: none; outline: none; box-shadow: 0 0 0 3px #118EC7; //цвет рамки при наведении курсора border: none >

Изменение внешнего вида кнопок

За счет CSS свойств border-radius (скругление углов), background (цвет фона), color (цвет текста), box-shadow (тень, в данном случае рамка при наведении) и width/height (ширина/высота кнопки) можно визуально преобразить внешний вид кнопки. Рассмотрим пару наглядных примеров.

Пример №1

Цвет фона оранжевый background: #F2720C; , иконка белого цвета в статике color: #fff; , квадратный вид кнопки border-radius: 0%; , иконка черного цвета при наведении color: #000; , рамка черного цвета при наведении box-shadow: 0 0 0 3px #000;

Пример №2

Цвет фона зеленый background: #34AF23; , иконка белого цвета в статике color: #fff; , кнопка в виде листочка border-radius: 50% 0%; , ширина по горизонтали 64 пикселя width: 64px; , иконка желтоватого цвета при наведении color: #EFE86A; , фон кнопки при наведении, как и рамка, красноватого оттенка background-color: #D84A2E; и box-shadow: 0 0 0 3px #EA5234;

Источник