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

Social media buttons html and css

Содержание
  1. 18 CSS Social Share Buttons
  2. Related Articles
  3. Author
  4. Links
  5. Made with
  6. About a code
  7. Share Button Hover Effect
  8. Author
  9. Links
  10. Made with
  11. About a code
  12. Share Button Hidden Icon
  13. Author
  14. Links
  15. Made with
  16. About a code
  17. Share Profile Button
  18. Author
  19. Links
  20. Made with
  21. About a code
  22. Neumorphism Social Share Button
  23. Author
  24. Links
  25. Made with
  26. About a code
  27. Share Button Float Icon
  28. Author
  29. Links
  30. Made with
  31. About the code
  32. Hover Me Pill Button
  33. Author
  34. Links
  35. Made with
  36. About the code
  37. Share Buttons Animation
  38. Author
  39. Links
  40. Made with
  41. About the code
  42. Share Button
  43. Author
  44. Links
  45. Made with
  46. About the code
  47. Social Share Button UI
  48. Author
  49. Links
  50. Made with
  51. About the code
  52. Facebook/Instagram Share Button
  53. Author
  54. Links
  55. Made with
  56. About the code
  57. Social Share Button
  58. Author
  59. Links
  60. Made with
  61. About the code
  62. Share Button
  63. Author
  64. Links
  65. Made with
  66. About the code
  67. Social Media Icons Share
  68. Author
  69. Links
  70. Made with
  71. About the code
  72. CSS Share Icons
  73. Author
  74. Links
  75. Made with
  76. About the code
  77. Social Share Button
  78. Author
  79. Links
  80. Made with
  81. About the code
  82. Social Share Button
  83. Author
  84. Links
  85. Made with
  86. About the code
  87. Slide-Out Social Buttons
  88. Author
  89. How TO — Social Media Buttons
  90. Rounded Example
  91. COLOR PICKER
  92. Report Error
  93. Thank You For Helping Us!
  94. 27 CSS Social Media Icons
  95. Related Articles
  96. Author
  97. Links
  98. Made with
  99. About a code
  100. 3D Social Media Button
  101. Author
  102. Links
  103. Made with
  104. About a code
  105. Social Animation
  106. Author
  107. Links
  108. Made with
  109. About a code
  110. Glass Effect Social Media Buttons with Neon Glow
  111. Author
  112. Links
  113. Made with
  114. About a code
  115. Social Links
  116. Author
  117. Links
  118. Made with
  119. About the code
  120. Dark Social Icons
  121. Author
  122. Links
  123. Made with
  124. About the code
  125. Fancy Hover Animation
  126. Author
  127. Links
  128. Made with
  129. About the code
  130. Social Media Icons
  131. Author
  132. Links
  133. Made with
  134. About the code
  135. 3D — CSS Social Tiles
  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. The Social Drawer
  146. Author
  147. Links
  148. Made with
  149. About the code
  150. Group Button with SVG Icons
  151. Author
  152. Links
  153. Made with
  154. About the code
  155. Social Icons
  156. Author
  157. Links
  158. Made with
  159. About the code
  160. Social Buttons
  161. Author
  162. Links
  163. Made with
  164. About the code
  165. CSS3 Social Buttons Vol.2
  166. Author
  167. Links
  168. Made with
  169. About the code
  170. CSS3 Social Buttons Vol.1
  171. Author
  172. Links
  173. Made with
  174. About the code
  175. Only CSS Direction-Aware Cube Social Links
  176. Author
  177. Links
  178. Made with
  179. About the code
  180. Social Buttons
  181. Author
  182. Links
  183. Made with
  184. About the code
  185. Social Buttons with Tooltips
  186. Author
  187. Links
  188. Made with
  189. About a code
  190. Social Buttons With Icon Fonts
  191. Author
  192. Links
  193. Made with
  194. About the code
  195. Social Connect
  196. Author
  197. Links
  198. Made with
  199. About the code
  200. Clean Social Buttons
  201. Author
  202. Links
  203. Made with
  204. About the code
  205. Stylish Social Buttons
  206. Author
  207. Links
  208. Made with
  209. About the code
  210. SVG Social Icons
  211. Author
  212. Links
  213. Made with
  214. About the code
  215. Social Links
  216. Author
  217. Links
  218. Made with
  219. About the code
  220. Social Media Icons
  221. Author
  222. Links
  223. Made with
  224. About the code
  225. Social Media Icons
  226. Author
  227. 99+ Social Media Buttons HTML Code Sample & Tutorial
  228. How to Create HTML Social Media Buttons
  229. Related Code Snippets:
Читайте также:  Create timestamp in java

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.

Author

Made with

About a code

Share Button Hover Effect

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Made with

About a code

Share Button Hidden Icon

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

Author

Made with

About a code

Share Profile Button

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

Author

Made with

About a code

Neumorphism Social Share Button

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

Author

Made with

About a code

Share Button Float Icon

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

Author

Made with

About the code

Hover Me Pill Button

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

Demo image: Share Buttons Animation

Author

Made with

About the code

Share Buttons Animation

HTML and CSS share buttons animation.

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

Demo image: Share Button

Author

Made with

About the code

Share Button

Inspired by Chris Gilmore’s shot on dribbble.com.

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

Demo image: Social Share Button UI

Author

Made with

About the code

Social Share Button UI

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

Demo image: Facebook/Instagram Share Button

Author

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

Demo image: Social Share Button

Author

Made with

About the code

Social Share Button

Cool animation, like the idea behind it — literally.

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

Demo image: Share Button

Author

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

Demo image: Social Media Icons Share

Author

Made with

About the code

Social Media Icons Share

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

Demo image: CSS Share Icons

Author

Made with

About the code

CSS Share Icons

Pure CSS share icons with hover effects.

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

Demo image: Social Share Button

Author

Made with

About the code

Social Share Button

Social share button that pull apart into seperate buttons.

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

Demo image: Social Share Button

Author

Made with

About the code

Social Share Button

Pure CSS social share button.

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

Demo image: Slide-Out Social Buttons

Author

Made with

About the code

Slide-Out Social Buttons

Experiment with hover states and social buttons.

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

Demo image: Simple Share Button

Author

Источник

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.

Unlock Full Access 50% off

COLOR PICKER

colorpicker

Join our Bootcamp!

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.

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

Источник

99+ Social Media Buttons HTML Code Sample & Tutorial

Social Media Buttons HTML Code

This lightweight code snippet helps you to create HTML social media buttons. Basically, these social buttons have been designed with CSS and Font Awesome for social icons. You can easily integrate them into your project for linking social media profiles. You only need to add a link to your social profile to href attribute of hyperlink.

Moreover, these social media buttons come with a stylish hover tooltip. If you are working on a social sharing project or simply want to place social media icons on the footer element, then these icons are the best fit for your need.

How to Create HTML Social Media Buttons

1. These social media buttons use Font Awesome 5 CSS for icons. So, load the Font Awesome CSS by adding the following CDN link into the head tag of your HTML page.

2. After that, create the HTML structure for the social media buttons as follows:

 
 
Facebook
  
Twitter
  
Instagram
  
Github
  
Youtube

3. Finally, style the social media buttons using the following CSS and done. You can set the custom size, color, and margin values for social icons according to your needs.

.wrapper .icon < position: relative; background-color: #ffffff; border-radius: 50%; margin: 10px; width: 50px; height: 50px; line-height: 50px; font-size: 22px; display: inline-block; align-items: center; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); color: #333; text-decoration: none; >.wrapper .tooltip < position: absolute; top: 0; line-height: 1.5; font-size: 14px; background-color: #ffffff; color: #ffffff; padding: 5px 8px; border-radius: 5px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); >.wrapper .tooltip::before < position: absolute; content: ""; height: 8px; width: 8px; background-color: #ffffff; bottom: -3px; left: 50%; transform: translate(-50%) rotate(45deg); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); >.wrapper .icon:hover .tooltip < top: -45px; opacity: 1; visibility: visible; pointer-events: auto; >.wrapper .icon:hover span, .wrapper .icon:hover .tooltip < text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); >.wrapper .facebook:hover, .wrapper .facebook:hover .tooltip, .wrapper .facebook:hover .tooltip::before < background-color: #3b5999; color: #ffffff; >.wrapper .twitter:hover, .wrapper .twitter:hover .tooltip, .wrapper .twitter:hover .tooltip::before < background-color: #46c1f6; color: #ffffff; >.wrapper .instagram:hover, .wrapper .instagram:hover .tooltip, .wrapper .instagram:hover .tooltip::before < background-color: #e1306c; color: #ffffff; >.wrapper .github:hover, .wrapper .github:hover .tooltip, .wrapper .github:hover .tooltip::before < background-color: #333333; color: #ffffff; >.wrapper .youtube:hover, .wrapper .youtube:hover .tooltip, .wrapper .youtube:hover .tooltip::before

That’s all! Hopefully, you have successfully integrated the code of these HTML social media buttons. If you have any questions or suggestions, let me know by comment below.

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Источник

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