# Social Share Buttons

**URL:** https://community.elfsight.com/c/css-codes/social-share-buttons/190.md

[Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md)

---

## [Add text above the buttons](https://community.elfsight.com/t/add-text-above-the-buttons/34494)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 4\
**Last updated:** [December 10, 2024, 2:05pm UTC](https://community.elfsight.com/t/add-text-above-the-buttons/34494 "2024-12-10T14:05:15Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Social Share Buttons widget’s settings: .global-styles, .eapps-social-share-buttons-container::before { content: "YOUR TEXT"; font-size: 15px; font-w…

---

## [Change color of the icons](https://community.elfsight.com/t/change-color-of-the-icons/81958)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 12, 2024, 6:24pm UTC](https://community.elfsight.com/t/change-color-of-the-icons/81958 "2024-11-12T18:24:09Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Social Share Buttons widget’s settings: .eapps-social-share-buttons-item-icon-container svg, .eapps-social-share-buttons-item-icon-container path, .eapps-so…

---

## [Remove padding on the sides](https://community.elfsight.com/t/remove-padding-on-the-sides/34495)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 14, 2023, 6:17pm UTC](https://community.elfsight.com/t/remove-padding-on-the-sides/34495 "2023-12-14T18:17:52Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Social Share Buttons widget’s settings: .eapps-social-share-buttons-item:first-child { margin-left: 0 !important; } .eapps-social-share-buttons-item:last…

---

## [Change size of the buttons](https://community.elfsight.com/t/change-size-of-the-buttons/34492)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 14, 2023, 6:11pm UTC](https://community.elfsight.com/t/change-size-of-the-buttons/34492 "2023-12-14T18:11:02Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Social Share Buttons widget’s settings: .eapps-social-share-buttons-inner { scale: 0.7; }

---

## [Change background color of all buttons](https://community.elfsight.com/t/change-background-color-of-all-buttons/34491)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 14, 2023, 6:09pm UTC](https://community.elfsight.com/t/change-background-color-of-all-buttons/34491 "2023-12-14T18:09:34Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Social Share Buttons widget’s settings: .eapps-social-share-buttons-item::before { background-color: red !important; }

---

## [Change background color on hover](https://community.elfsight.com/t/change-background-color-on-hover/34493)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 14, 2023, 6:15pm UTC](https://community.elfsight.com/t/change-background-color-on-hover/34493 "2023-12-14T18:15:03Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Social Share Buttons widget’s settings: .eapps-social-share-buttons-item::after { background-color: yellow; }

---

## [Change color of the black share button on mobile (floating layout)](https://community.elfsight.com/t/change-color-of-the-black-share-button-on-mobile-floating-layout/35726)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 29, 2023, 1:46pm UTC](https://community.elfsight.com/t/change-color-of-the-black-share-button-on-mobile-floating-layout/35726 "2023-12-29T13:46:32Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Social Share Buttons widget’s settings: .eapps-social-share-buttons-mobile-button-open{ background: red; }

---

## [Change background color of the specific share button](https://community.elfsight.com/t/change-background-color-of-the-specific-share-button/34490)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 14, 2023, 6:08pm UTC](https://community.elfsight.com/t/change-background-color-of-the-specific-share-button/34490 "2023-12-14T18:08:19Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Social Share Buttons widget’s settings: .eapps-social-share-buttons-item-facebook::before { background-color: red; } Replace facebook with the name of th…