# Click to Call

**URL:** https://community.elfsight.com/c/css-codes/click-to-call/204.md

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

---

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

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [July 3, 2025, 6:27pm UTC](https://community.elfsight.com/t/change-size-of-the-bubble/129175 "2025-07-03T18:27:55Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Click to Call widget’s settings: .eapp-click-to-call-button-component { transform: scale(0.8); /\* Adjust the scale value to make it smaller \*/ }

---

## [Make corners of window, call and floating buttons square](https://community.elfsight.com/t/make-corners-of-window-call-and-floating-buttons-square/90289)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 18, 2024, 6:27pm UTC](https://community.elfsight.com/t/make-corners-of-window-call-and-floating-buttons-square/90289 "2024-12-18T18:27:19Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Click to Call widget’s settings: .eapp-click-to-call-window-component, .eapp-click-to-call-window-phone, .eapp-click-to-call-button-component { border-radiu…

---

## [Change bubble icon color](https://community.elfsight.com/t/change-bubble-icon-color/57415)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [June 18, 2024, 8:34am UTC](https://community.elfsight.com/t/change-bubble-icon-color/57415 "2024-06-18T08:34:51Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Click to Call widget’s settings: .global-styles, .eapp-click-to-call-button-icon svg { fill: #fff; } Guys, if this code was helpful to you, please drop a…

---

## [Set custom font for all elements (Click to Call)](https://community.elfsight.com/t/set-custom-font-for-all-elements-click-to-call/38096)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [January 19, 2024, 5:29pm UTC](https://community.elfsight.com/t/set-custom-font-for-all-elements-click-to-call/38096 "2024-01-19T17:29:48Z")

</div>

Although we do provide a list of fonts for you to choose for your widget, you might happen to need a custom code. If that is the case, add the code below to Custom CSS field on your Click to Call widget’s Appearance tab…

---

## [Move widget higher](https://community.elfsight.com/t/move-widget-higher/38101)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [January 19, 2024, 6:03pm UTC](https://community.elfsight.com/t/move-widget-higher/38101 "2024-01-19T18:03:27Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Click to Call widget’s settings: .global-styles, \[class^="Widget\_\_Component"\] { bottom: 80px !important; }

---

## [Move widget to the top](https://community.elfsight.com/t/move-widget-to-the-top/38102)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [January 19, 2024, 6:09pm UTC](https://community.elfsight.com/t/move-widget-to-the-top/38102 "2024-01-19T18:09:42Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Click to Call widget’s settings: .global-styles, \[class^="Main\_\_Component"\] { bottom: auto; top: 10px; } .global-styles, .eapp-click-to-call-window-com…

---

## [Change border radius of the button](https://community.elfsight.com/t/change-border-radius-of-the-button/38103)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [January 19, 2024, 6:12pm UTC](https://community.elfsight.com/t/change-border-radius-of-the-button/38103 "2024-01-19T18:12:55Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Click to Call widget’s settings: .eapp-click-to-call-button-component { border-radius: 5px; }

---

## [Move widget to the center](https://community.elfsight.com/t/move-widget-to-the-center/38104)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [January 19, 2024, 6:13pm UTC](https://community.elfsight.com/t/move-widget-to-the-center/38104 "2024-01-19T18:13:41Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Click to Call widget’s settings: \[class\*="Main\_\_Component-sc"\] { right: 50% !important; transform: translate(50%, 0) !important; } .eapp-click-to-call-wi…
