Button GUI with border radius 100%

I’d like to achieve what seems like a simple task, border radius of 100%.

The button i’m using is a Button.CreateSimpleButton(“button”, “+”);
It needs to have a circle shape but the property .cornerRadius accepts only numbers, while i have to put “100%”.

Is there a way to do this?

Thank you

Hi. Use gui ellipse https://www.babylonjs-playground.com/#XCPP9Y#10 as background for transparent button. Rectangles work not similar to css. Or you can use image background with svg

Thank you for the answer.

I tried to add the ellipse to the background of button but it’s throws error saying that “Type Ellipse is not assignable to type string”

At first i was using an ellipse, but i had to switch to a button cause i need to add some text inside and couldn’t find a way to add it to the ellipse shape.

Could you help me with that, then?
These are the cases:

Schermata 2020-07-22 alle 12.17.53

Schermata 2020-07-22 alle 12.17.57

you can add text as child to parent button https://www.babylonjs-playground.com/#XCPP9Y#3240
and please read docs Use the Babylon GUI - Babylon.js Documentation
and use inspector программа для Web - скриншотов

2 Likes