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

Share this button css

Содержание
  1. Кнопки «поделиться» для сайта
  2. Поделиться в фейсбук
  3. Поделиться вконтакте
  4. Поделиться в ok
  5. Поделиться в телеграм
  6. Поделиться в pinterest
  7. Поделиться в twitter
  8. Поделиться в @Мой мир mail.ru
  9. Поделиться в Linkedin
  10. Статьи из данной категории:
  11. Комментарии ( 5 )
  12. How to create a Share Button with different Social Handles using HTML and CSS?
  13. Create a Share Button With Different Social Handles
  14. Example Html
  15. Example CSS
  16. Example JavaScript
  17. Complete Example
  18. Conclusion
  19. 18 CSS Social Share Buttons
  20. Related Articles
  21. Author
  22. Links
  23. Made with
  24. About a code
  25. Share Button Hover Effect
  26. Author
  27. Links
  28. Made with
  29. About a code
  30. Share Button Hidden Icon
  31. Author
  32. Links
  33. Made with
  34. About a code
  35. Share Profile Button
  36. Author
  37. Links
  38. Made with
  39. About a code
  40. Neumorphism Social Share Button
  41. Author
  42. Links
  43. Made with
  44. About a code
  45. Share Button Float Icon
  46. Author
  47. Links
  48. Made with
  49. About the code
  50. Hover Me Pill Button
  51. Author
  52. Links
  53. Made with
  54. About the code
  55. Share Buttons Animation
  56. Author
  57. Links
  58. Made with
  59. About the code
  60. Share Button
  61. Author
  62. Links
  63. Made with
  64. About the code
  65. Social Share Button UI
  66. Author
  67. Links
  68. Made with
  69. About the code
  70. Facebook/Instagram Share Button
  71. Author
  72. Links
  73. Made with
  74. About the code
  75. Social Share Button
  76. Author
  77. Links
  78. Made with
  79. About the code
  80. Share Button
  81. Author
  82. Links
  83. Made with
  84. About the code
  85. Social Media Icons Share
  86. Author
  87. Links
  88. Made with
  89. About the code
  90. CSS Share Icons
  91. Author
  92. Links
  93. Made with
  94. About the code
  95. Social Share Button
  96. Author
  97. Links
  98. Made with
  99. About the code
  100. Social Share Button
  101. Author
  102. Links
  103. Made with
  104. About the code
  105. Slide-Out Social Buttons
  106. Author
  107. Create Share Button Using HTML & CSS
  108. HTML Code For Share Button
  109. HTML Code For Share Button
  110. Final Output Of Share Button Using HTML & CSS
Читайте также:  Java как называется оператор

Кнопки «поделиться» для сайта

Рассмотрим, как добавить социальные кнопки «поделиться» для вашего сайта. Для решения данной задачи мы не будем использовать сторонние сервисы, поэтому наши кнопки «поделиться» не будут оказывать отрицательного влияния на загрузку сайта и будут стабильно работать.

.share-buttons < display: flex; flex-wrap: wrap; >.share-buttons a < margin-bottom: 5px; width: 40px; height: 40px; >.share-buttons a:not(:last-child) < margin-right: 5px; >.share-buttons .facebook < background: url("../img/share-btns.png") no-repeat left top; >.share-buttons .vkontakte < background: url("../img/share-btns.png") no-repeat -168px top; >.share-buttons .ok < background: url("../img/share-btns.png") no-repeat -126px top; >.share-buttons .twitter < background: url("../img/share-btns.png") no-repeat -42px top; >.share-buttons .pinterest < background: url("../img/share-btns.png") no-repeat -210px top; >.share-buttons .mail < background: url("../img/share-btns.png") no-repeat -294px top; >.share-buttons .telegram < background: url("../img/share-btns.png") no-repeat -672px top; >

Так просто можно добавить кнопки «поделиться» на ваш сайт.

Благодаря тому, что мы писали весь код вручную, без использования сторонних сервисов, стилизовать кнопки можно как это необходимо.

Важно лишь верно заполнить ссылки, которые позволяют делится контентом текущей страницы.

Поделиться в фейсбук

https://www.facebook.com/sharer.php?u=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться вконтакте

https://vkontakte.ru/share.php?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться в ok

https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ&st.comments=ОПИСАНИЕ

Поделиться в телеграм

https://telegram.me/share/url?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться в pinterest

https://ru.pinterest.com/pin/create/button/?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Для pinterest необходимо так же добавить изображение записи (страницы)

data-media="АДРЕС_ИЗОБРАЖЕНИЯ"

Поделиться в twitter

https://twitter.com/intent/tweet?text=ТАЙТЛ_СТАТЬИ(ЗАГОЛОВОК). Описание. Ссылка

Поделиться в @Мой мир mail.ru

https://connect.mail.ru/share?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Для @Мой мир необходимо так же добавить изображение записи (страницы).

data-media="АДРЕС_ИЗОБРАЖЕНИЯ"

Используя данные ссылки, вы можете создать виджет абсолютно любого вида и размера. Например, вместо спрайта что мы использовали ранее — можете воспользоваться шрифтовыми иконками fontAwesome:

И далее добавлять необходимые стили.

Чтобы подтягивались необходимые изображения ваших статей, используйте Open Graph разметку.

Поделиться в Linkedin

Чтобы поделиться в Linkedin используйте следующий код.

Мы рассмотрели, как добавить кнопки «поделиться» для наиболее популярных социальных сетей в русскоязычном сегменте.

Если вам понравилась данная статья, то возможно и ссылки на мессенджеры окажется для вас полезной.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Статьи из данной категории:

Комментарии ( 5 )

Подскажите пожалуйста, как быть, если я пишу сайт на локальном сервере Open Server, какой полный адресс указывать? https://www.facebook.com/sharer.php?u=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ на типо: /roads/road_1.php?

А зачем вам указывать локальный адрес? Вы же его не будите расшаривать. Вам нужно указывать глобальный адрес (адрес сайта, который будет на хостинге).

Спасибо! Но, не совсем понял, можете объяснить если не сложно? Или показать хотя бы как пример как записать адресс в моем случае? Ведь домена у меня еще нет. Просто пишется код в open server. И где мне тогда в моем случае взять глобальный адресс?

Источник

How to create a Share Button with different Social Handles using HTML and CSS?

In today’s digital age, social media has become an essential part of our lives. Whether it’s for personal or professional use, we all want to share our content with the world. That’s where social sharing buttons come in handy, allowing users to quickly and easily share content on their favorite social media platforms.

In this article, we will explore how to create a share button with different social handles using HTML and CSS.

Create a Share Button With Different Social Handles

We will walk through step-by-step instructions on how to create a share button with multiple social media options, including Facebook, Twitter, LinkedIn, and more. By the end of this article, you will have the skills to create your own custom share button, making it easier for your audience to share your content across various social media platforms.

Example Html

The following example demonstrates creating share buttons for all popular social media handles.

Create a HTML file that includes a reference to an external stylesheet (style.css) and two JavaScript files (index.js and https://kit.fontawesome.com/704ff50790.js), and includes a element with class share-buttons.

  • The section contains a element with a class of share-buttons, which includes several elements with classes of share-button and specific social media platform names (e.g., facebook, twitter, linkedin).
  • Each of the buttons includes an element with a class of fab (indicating a Font Awesome icon) and a specific icon name (e.g., fa-facebook-f, fa-twitter, fa-linkedin-in).
  • Style the share buttons using CSS.
  • Add a click event listener to all the share button using JavaScript.

Example CSS

Following is the CSS code of our example. Here we have created 4 rules −

  • The first rule .share-buttons applies display:flex and gap:10px to arrange the buttons horizontally with a gap of 10 pixels between them.
  • The second rule .share-button applies a set of common styles to all buttons such as border:none, border-radius:5px, color:#fff, cursor:pointer, font-size:16px and padding:8px 16px.
  • The subsequent rules .facebook, .twitter, .linkedin, .pinterest, .reddit, and .whatsapp define specific background colors for each button, corresponding to the respective social media platform.

Together, these rules define the appearance of a set of social media sharing buttons with consistent styles and colors.

.share-buttons < display: flex; gap: 10px; >.share-button < border: none; border-radius: 5px; color: #fff; cursor: pointer; font-size: 16px; padding: 8px 16px; >.facebook < background-color: #3b5998; >.twitter < background-color: #1da1f2; >.linkedin < background-color: #0077b5; >.pinterest < background-color: #bd081c; >.reddit < background-color: #ff4500; >.whatsapp

Example JavaScript

The following code adds a click event listener to a set of share buttons, each of which represents a social media platform (Facebook, Twitter, LinkedIn, Pinterest, Reddit, WhatsApp). When a user clicks on one of these buttons, a new window opens with the corresponding share URL for the current page.

Complete Example

     .share-buttons < display: flex; gap: 10px; >.share-button < border: none; border-radius: 5px; color: #fff; cursor: pointer; font-size: 16px; padding: 8px 16px; >.facebook < background-color: #3b5998; >.twitter < background-color: #1da1f2; >.linkedin < background-color: #0077b5; >.pinterest < background-color: #bd081c; >.reddit < background-color: #ff4500; >.whatsapp

Conclusion

In conclusion, adding social media share buttons to a website or web application is a simple way to increase engagement and drive traffic to your content. By using HTML and CSS, you can create visually appealing buttons that allow visitors to easily share your content on various social media platforms. Additionally, by including JavaScript, you can make the buttons functional and dynamically generate share URLs based on the current page’s URL. In today’s digital age, social media plays a vital role in content distribution and engagement. As such, incorporating share buttons into your website or web application is a must. With the steps outlined in this article, you can create share buttons with different social handles using HTML, CSS, and JavaScript, and make it easier for your audience to share your content on their preferred social media platforms.

Источник

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

Источник

Create Share Button Using HTML & CSS

Welcome to the Codewithrandom blog. In this blog, We learn how to create a Share Button . We use HTML and CSS for this Share Button.

I hope you enjoy our blog so let’s start with a basic Html Structure for Share Button.

HTML Code For Share Button

There is all the Html Code for the Share Button. Now, you can see output without Css Code, then we write Css for our Styling and give some animation in Share Button.

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.

Share Button Using HTML & CSS

HTML Code For Share Button

* < margin: 0; padding: 0; box-sizing: border-box; >body < display: flex; justify-content: center; align-items: center; height: 100vh; >.container < width: 40px; height: 40px; position: relative; >.container input < position: absolute; width: 100%; height: 100%; appearance: none; -webkit-appearance: none; cursor: pointer; >.container input::before < content: "\f1e0"; position: absolute; font-family: 'Font Awesome 6 Free'; font-weight: 700; font-size: 1.5rem; top: 0; left: 0; width: 100%; height: 100%; background: #9733EE; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; >.container input:checked::before < content: "\f00d"; font-size: 2rem; >.container input::after < content: ""; position: absolute; top: -35%; left: -35%; width: 120%; height: 120%; z-index: -10; border: 10px solid #9733EE; box-shadow: 0 0 30px #9733ee4f; border-radius: 0%; transform: scale(.5); transition: all .4s; >.container input:checked::after < transform: scale(1.5); border-radius: 50%; >.links < position: absolute; z-index: -10; >.container input:checked ~ .links < transition: all 4s; z-index: 50; >.links a < position: absolute; width: 40px; height: 40px; text-decoration: none; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.226); border-radius: 50%; cursor: pointer; color: white; transition: all .4s; transition-delay: calc(var(--i)* 0.1s); backdrop-filter: blur(5px); >.links a i < font-size: 1.5em; >.container input:checked ~ .links a:nth-child(1) < transform: translateY(-130%); >.container input:checked ~ .links a:nth-child(2) < transform: translateX(130%); >.container input:checked ~ .links a:nth-child(3) < transform: translateY(130%); >.container input:checked ~ .links a:nth-child(4)

Now we have completed our Share Button Using Css. Here is our updated output HTML + CSS.

Final Output Of Share Button Using HTML & CSS

Share Button Using HTML & CSS

Share Button Using HTML & CSS

GitHub link of this Share Button👉 – Here
Now we have completed our Css section. Here is our updated output with Html and Css. Hope you like Share Button Project. Using CSS, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development.

In this post, we learn how to Create a Share Button Using HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you learn quickly.

Written by – Code With Random/Anki

Источник

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