# Button

**URL:** https://community.elfsight.com/c/css-codes/button/202.md

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

---

## [Hide widget on desktop (floating layout)](https://community.elfsight.com/t/hide-widget-on-desktop-floating-layout/38111)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 1\
**Last updated:** [May 16, 2026, 12:45pm UTC](https://community.elfsight.com/t/hide-widget-on-desktop-floating-layout/38111 "2026-05-16T12:45:24Z")

</div>

Add this code to the Custom CSS field on the Design tab of your Button widget’s settings: @media (min-width: 450px) { .global-styles, \[class\*="FloatingButton\_\_FloatingButtonContainer-sc"\] { display: none !importa…

---

## [Add gradient effect](https://community.elfsight.com/t/add-gradient-effect/38108)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 2\
**Last updated:** [April 13, 2026, 2:11pm UTC](https://community.elfsight.com/t/add-gradient-effect/38108 "2026-04-13T14:11:17Z")

</div>

Add this code to the Custom CSS field on the Design tab of your Button widget’s settings: \[class^="ButtonBase\_\_ButtonContainer"\] { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #…

---

## [Make scroll to element action smooth](https://community.elfsight.com/t/make-scroll-to-element-action-smooth/90266)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 18, 2024, 5:08pm UTC](https://community.elfsight.com/t/make-scroll-to-element-action-smooth/90266 "2024-12-18T17:08:33Z")

</div>

Add this code to the Custom CSS field on the Design tab of your Button widget’s settings: @external { body { scroll-behavior: smooth; } }

---

## [Reduce embedded button size on mobile](https://community.elfsight.com/t/reduce-embedded-button-size-on-mobile/86432)

<div class="topic-metadata">

**Author:** [@Sina](https://community.elfsight.com/u/Sina)\
**Replies:** 0\
**Last updated:** [December 1, 2024, 8:42pm UTC](https://community.elfsight.com/t/reduce-embedded-button-size-on-mobile/86432 "2024-12-01T20:42:12Z")

</div>

Add this code to the Custom CSS field on the Design tab of your Button widget’s settings: @media(max-width: 500px) { .global-styles, \[class^="ButtonContent\_\_Container-sc"\] { transform: scale(0.9); } }

---

## [Hide widget on desktop (embedded layout)](https://community.elfsight.com/t/hide-widget-on-desktop-embedded-layout/38110)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [January 19, 2024, 6:28pm UTC](https://community.elfsight.com/t/hide-widget-on-desktop-embedded-layout/38110 "2024-01-19T18:28:34Z")

</div>

Add this code to the Custom CSS field on the Design tab of your Button widget’s settings: For Embed: @media (min-width: 481px) { \[class\*='ButtonContent\_\_Container-sc'\] { display: none; } } For Floating: @media (min-w…

---

## [Align emdedded button to the left](https://community.elfsight.com/t/align-emdedded-button-to-the-left/38109)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 2\
**Last updated:** [November 17, 2024, 11:39pm UTC](https://community.elfsight.com/t/align-emdedded-button-to-the-left/38109 "2024-11-17T23:39:22Z")

</div>

Add this code to the Custom CSS field on the Design tab of your Button widget’s settings: \[class\*="ButtonBase\_\_ButtonContainer"\] { align-self: flex-start; }

---

## [Hide widget on mobile floating layout](https://community.elfsight.com/t/hide-widget-on-mobile-floating-layout/38113)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [January 19, 2024, 6:33pm UTC](https://community.elfsight.com/t/hide-widget-on-mobile-floating-layout/38113 "2024-01-19T18:33:22Z")

</div>

Add this code to the Custom CSS field on the Design tab of your Button widget’s settings: @media (max-width: 500px) { .global-styles, \[class\*="FloatingButton\_\_FloatingButtonContainer-sc"\]{ display: none !important…