Главная » Языки программирования

Social media icons html

На чтение 9 мин
Содержание
  1. Social Media Icons Using HTML CSS
  2. 27 CSS Social Media Icons
  3. Related Articles
  4. Author
  5. Links
  6. Made with
  7. About a code
  8. 3D Social Media Button
  9. Author
  10. Links
  11. Made with
  12. About a code
  13. Social Animation
  14. Author
  15. Links
  16. Made with
  17. About a code
  18. Glass Effect Social Media Buttons with Neon Glow
  19. Author
  20. Links
  21. Made with
  22. About a code
  23. Social Links
  24. Author
  25. Links
  26. Made with
  27. About the code
  28. Dark Social Icons
  29. Author
  30. Links
  31. Made with
  32. About the code
  33. Fancy Hover Animation
  34. Author
  35. Links
  36. Made with
  37. About the code
  38. Social Media Icons
  39. Author
  40. Links
  41. Made with
  42. About the code
  43. 3D — CSS Social Tiles
  44. Author
  45. Links
  46. Made with
  47. About the code
  48. Social Media Icons
  49. Author
  50. Links
  51. Made with
  52. About the code
  53. The Social Drawer
  54. Author
  55. Links
  56. Made with
  57. About the code
  58. Group Button with SVG Icons
  59. Author
  60. Links
  61. Made with
  62. About the code
  63. Social Icons
  64. Author
  65. Links
  66. Made with
  67. About the code
  68. Social Buttons
  69. Author
  70. Links
  71. Made with
  72. About the code
  73. CSS3 Social Buttons Vol.2
  74. Author
  75. Links
  76. Made with
  77. About the code
  78. CSS3 Social Buttons Vol.1
  79. Author
  80. Links
  81. Made with
  82. About the code
  83. Only CSS Direction-Aware Cube Social Links
  84. Author
  85. Links
  86. Made with
  87. About the code
  88. Social Buttons
  89. Author
  90. Links
  91. Made with
  92. About the code
  93. Social Buttons with Tooltips
  94. Author
  95. Links
  96. Made with
  97. About a code
  98. Social Buttons With Icon Fonts
  99. Author
  100. Links
  101. Made with
  102. About the code
  103. Social Connect
  104. Author
  105. Links
  106. Made with
  107. About the code
  108. Clean Social Buttons
  109. Author
  110. Links
  111. Made with
  112. About the code
  113. Stylish Social Buttons
  114. Author
  115. Links
  116. Made with
  117. About the code
  118. SVG Social Icons
  119. Author
  120. Links
  121. Made with
  122. About the code
  123. Social Links
  124. Author
  125. Links
  126. Made with
  127. About the code
  128. Social Media Icons
  129. Author
  130. Links
  131. Made with
  132. About the code
  133. Social Media Icons
  134. Author

Social Media Icons Using HTML CSS

Hello there! In this article, you will find 15+ CSS Social Buttons & Icons made with pure HTML and CSS with complete source code so you can copy and paste it into your project.

Everyone uses social platforms these days, and adding links to social handles is a must on a website. so why use plain boring social media icons? Don’t worry we’ve got you covered. We have Handpicked the best 15+ CSS Social Buttons & Icons from the web for you to use in your project.

Let’s see some cool 15+ CSS Social Buttons & Icons.

1. Floating Social Buttons (Font Awesome)

Code by Noah
Demo & download Click here for code
Language used HTML,CSS
External link / Dependencies No
Responsive No

Let’s start our list with floating social icons by Noah made using HTML and CSS. on hover the icons rise above.

master frontend development ebook cover

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

2. Social Media Icons

Code by Marty
Demo & download click here for code
Language used HTML,CSS
External link / Dependencies Yes
Responsive No
Читайте также:  Localdate example in java

Marty’s social media icons were developed using HTML and CSS. on hover the color of the icon changes.

3. Yet Another Set of Animated Social Icons

Code by James Fleeting
Demo & download click here for code
Language used HTML,CSS(SCSS)
External link / Dependencies Yes
Responsive Yes

A collection of animated social media icons by James Fleeting made with HTML and CSS(SCSS). simple spinning and border-radius animation on :hover for social icons.

4. Fancy Up Those Social Media Icons.

Code by Tichaona Brendon Nyeke
Demo & download click here for code
Language used HTML,CSS(SCSS)
External link / Dependencies Yes
Responsive No

A massive collection of social media icons by Tichaona Brendon Nyeke made by using HTML and CSS(SCSS).

5. Social Buttons

See the Pen Social Buttons by Dariusz Syncerek (@dsyncerek) on CodePen.

Code by Dariusz Syncerek
Demo & download click here for code
Language used HTML,CSS(SCSS)
External link / Dependencies Yes
Responsive Yes

Simple and clean-looking social buttons by Dariusz Syncerek. These icons are made with HTML and CSS(SCSS)

6. SVG Social Media Icons

See the Pen SVG Social Media Icons by Ruandré Janse van Rensburg (@ruandre) on CodePen.

Code by Ruandré Janse van Rensburg
Demo & download click here for code
Language used HTML,CSS(Sass),JS(Babel)
External link / Dependencies Yes
Responsive No

SVG Social Media Icons by Ruandré Janse van Rensburg were made using HTML, CSS(Sass), and JS(Babel).

7. SVG Social Icons

Social icons by Kevin Dewar were made by using HTML and CSS(SCSS). on hover, the icon’s border glows.

8. 3D – CSS Social Tiles

Code by Stockin
Demo & download click here for code
Language used HTML,CSS
External link / Dependencies Yes
Responsive No

3D social media icons in the form of tiles. These icons are made by Stockin using HTML and CSS.

9. Media Icons

See the Pen Media Icons by matt henley (@mattbhenley) on CodePen.

Code by matt henley
Demo & download click here for code
Language used HTML,CSS(SCSS)
External link / Dependencies No
Responsive No

Social media icons with hover and inverse actions made by matt henley using HTML and CSS(SCSS).

10. CSS social buttons and icons

Code by Stan Williams
Demo & download click here for code
Language used HTML,CSS
External link / Dependencies No
Responsive No

A massive collection of different social media icons by Stan Williams made with pure HTML and CSS.

11. The Social Drawer

Code by Nour Saud
Demo & download click here for code
Language used HTML,CSS(SCSS)
External link / Dependencies No
Responsive No

A very unique drawer with social links designed by Nour Saud made using HTML and CSS(SCSS).

12. Animated Morphing Blob Social Buttons (React + Tailwind)

Code by Mark Mead
Demo & download click here for code
Language used HTML,CSS(SCSS),JS(Babel)
External link / Dependencies Yes
Responsive No

animated morphing blog effect with CSS border-radius made by Mark Mead using HTML, CSS(SCSS), and JS(Babel)

Читайте также:  Custom select boxes css

13. Stylish Social Buttons

Code by Chris Deacy
Demo & download click here for code
Language used HTML(Pug),CSS(Stylus)
External link / Dependencies Yes
Responsive Yes

A few cool social buttons with smooth animations by Chris Deacy were made with HTML(Pug) and CSS(Stylus).

14. Font Awesome Colored – Brand And Social Icons

Code by Amey Raut
Demo & download click here for code
Language used HTML,CSS
External link / Dependencies Yes
Responsive Yes

Font Awesome Brand and social Icons with brand color. These are made by Amey Raut using HTML and CSS.

15. CSS Social Media Icons

See the Pen CSS Social Media Icons by Muhammet Hayran (@hayran) on CodePen.

Code by Muhammet Hayran
Demo & download click here for code
Language used HTML,CSS
External link / Dependencies No
Responsive Yes

Social Media Icons using Pure CSS and font awesome library made by Muhammet Hayran by using HTML and CSS

16. Fancy Hover Social Buttons

Code by Ben Hodgson
Demo & download click here for code
Language used HTML,CSS(SCSS)
External link / Dependencies No
Responsive Yes

Let’s end our list with Fluid social network buttons by Ben Hodgson. On hover, the network logo disappears into the distance, and text with the name of the network appears with blur/opacity filters. Uses Sass (SCSS) + Autoprefixer.

That’s it, folks. In this article, we shared 15+ CSS Social Buttons & Icons with cool and different designs. We have covered a lot in this article from simple and clean social icons & buttons to 3D social icons & Buttons and also a few massive collections of social icons.

Hope you liked this article. Share this with your fellow developers. Comment down below your thoughts and suggestions, we would love to hear from you.

See our other articles on codewithrandom and gain knowledge in Front-End Development.

Thank you and keep learning!!

Источник

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

Источник

Оцените статью
© 2023 Программирование