# Adjust Button Font Color and Radius

**URL:** <https://community.elfsight.com/t/adjust-button-font-color-and-radius/108724>\
**Category:** Customization\
**Tags:** calculator\
**Created:** [March 22, 2025, 10:03pm UTC](https://community.elfsight.com/t/adjust-button-font-color-and-radius/108724 "2025-03-22T22:03:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Todd](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/todd/32/425_2.png) [@Todd](https://community.elfsight.com/u/Todd)\
**Post date:** [March 22, 2025, 10:03pm UTC](https://community.elfsight.com/t/adjust-button-font-color-and-radius/108724/1 "2025-03-22T22:03:34Z")

</div>

As the title says, I’d like to change the font=color to white and radius the button so that it is a capsule. Possible?

---

<div class="post-metadata">

**Author:** ![Sina](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sina/32/59970_2.png) [@Sina](https://community.elfsight.com/u/Sina)\
**Post date:** [March 23, 2025, 9:34am UTC](https://community.elfsight.com/t/adjust-button-font-color-and-radius/108724/2 "2025-03-23T09:34:21Z")

</div>

Hi @Todd

add this code to the Custom CSS field on the Settings tab of your [Calculator](https://dash.elfsight.com/apps/calculator) widget’s settings:

```auto
[class*="ButtonBase__Overlay-sc"]{
  color: #fff !important; /*white font color*/
}
[class*="ButtonBase__ButtonContainer-sc"]{
  border-radius: 50px !important; /*button so that it is a capsule*/
}

```

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 24, 2025, 10:37am UTC](https://community.elfsight.com/t/adjust-button-font-color-and-radius/108724/4 "2025-03-24T10:37:28Z")

</div>

Hi there, @Todd 👋

I see that you’ve added the code shared by Sina to your widget already, and it worked great.

If you have any further questions, don’t hesitate to drop a line here. We’ll be delighted to help 😉

---

<div class="post-metadata">

**Author:** ![William62](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/william62/32/67507_2.png) [@William62](https://community.elfsight.com/u/William62)\
**Post date:** [May 26, 2025, 1:13pm UTC](https://community.elfsight.com/t/adjust-button-font-color-and-radius/108724/5 "2025-05-26T13:13:39Z")

</div>

> [@Sina](#):
>
> ```auto
> [class*="ButtonBase__Overlay-sc"]{
> color: #fff !important; /*white font color*/
> }
> [class*="ButtonBase__ButtonContainer-sc"]{
> border-radius: 50px !important; /*button so that it is a capsule*/
> }
> 
> ```

This code works great. Thank you.