- Как сделать — Кнопки социальных сетей
- Кнопки социальных сетей
- Создать кнопки социальных сетей
- Пример
- Square Пример
- Круглая кнопка
- Rounded Пример
- ВЫБОР ЦВЕТА
- Сообщить об ошибке
- Ваше предложение:
- Спасибо Вам за то, что помогаете!
- How TO — Social Media Buttons
- Rounded Example
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- 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
- 18 CSS Social Share Buttons
- Related Articles
- Author
- Links
- Made with
- About a code
- Share Button Hover Effect
- Author
- Links
- Made with
- About a code
- Share Button Hidden Icon
- Author
- Links
- Made with
- About a code
- Share Profile Button
- Author
- Links
- Made with
- About a code
- Neumorphism Social Share Button
- Author
- Links
- Made with
- About a code
- Share Button Float Icon
- Author
- Links
- Made with
- About the code
- Hover Me Pill Button
- Author
- Links
- Made with
- About the code
- Share Buttons Animation
- Author
- Links
- Made with
- About the code
- Share Button
- Author
- Links
- Made with
- About the code
- Social Share Button UI
- Author
- Links
- Made with
- About the code
- Facebook/Instagram Share Button
- Author
- Links
- Made with
- About the code
- Social Share Button
- Author
- Links
- Made with
- About the code
- Share Button
- Author
- Links
- Made with
- About the code
- Social Media Icons Share
- Author
- Links
- Made with
- About the code
- CSS Share Icons
- Author
- Links
- Made with
- About the code
- Social Share Button
- Author
- Links
- Made with
- About the code
- Social Share Button
- Author
- Links
- Made with
- About the code
- Slide-Out Social Buttons
- 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 и политика конфиденциальности.
How TO — Social Media Buttons
Tip: Add border-radius:50% to create round buttons, and reduce the width :
Rounded Example
.fa <
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
>
Tip: Go to our Icons Tutorial to learn more about icons.
Go to our CSS Buttons Tutorial to learn more about how to style buttons.
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
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
18 CSS Social Share Buttons
Collection of hand-picked free HTML and CSS social share button code examples from Codepen, GitHub and other resources. Update of October 2021 collection. 3 new items.
Related Articles
Author
Links
Made with
About a code
Share Button Hover Effect
Compatible browsers: Chrome, Edge, Opera, Safari
Author
Links
Made with
About a code
Share Button Hidden Icon
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Share Profile Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Neumorphism Social Share Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Share Button Float Icon
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Hover Me Pill Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Share Buttons Animation
HTML and CSS share buttons animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Share Button
Inspired by Chris Gilmore’s shot on dribbble.com.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Social Share Button UI
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Facebook/Instagram Share Button
Pretty and simple share buttons for Instagram and Facebook.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Social Share Button
Cool animation, like the idea behind it — literally.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Share Button
Simple and unique share button in HTML and CSS. Version with jQuery: https://codepen.io/onediv/pen/dkFco.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Social Media Icons Share
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
CSS Share Icons
Pure CSS share icons with hover effects.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Social Share Button
Social share button that pull apart into seperate buttons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Social Share Button
Pure CSS social share button.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Slide-Out Social Buttons
Experiment with hover states and social buttons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari