# How to change the material of HolographicButton

**URL:** https://forum.babylonjs.com/t/how-to-change-the-material-of-holographicbutton/46263
**Category:** Questions
**Tags:** gui, button
**Created:** [December 7, 2023, 6:13pm UTC](https://forum.babylonjs.com/t/how-to-change-the-material-of-holographicbutton/46263 "2023-12-07T18:13:06Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Qq\_Xia](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq_xia/32/27770_2.png) [@Qq\_Xia](https://forum.babylonjs.com/u/Qq_Xia)
#### Post date: [December 7, 2023, 6:13pm UTC](https://forum.babylonjs.com/t/how-to-change-the-material-of-holographicbutton/46263/1 "2023-12-07T18:13:06Z")

</div>

Hello,  
I have a question for this example:

> **[Babylon.js Playground](https://playground.babylonjs.com/#2YZFA0%23309)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

The frontMaterial is a read only property, and this example is using set a new material in frontMaterial, and it works. But I am doing it in my project in VScode, it does’t works. Should I change the library to add the set function ? (ps: I have the last version of babylonjs.), I got same issue with StackPanel3D, I want to change the material of stackPanel.

Thanks.

---

<div class="post-metadata">

### Author: ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)
#### Post date: [December 8, 2023, 11:43am UTC](https://forum.babylonjs.com/t/how-to-change-the-material-of-holographicbutton/46263/2 "2023-12-08T11:43:07Z")

</div>

Hello and welcome!  
What properties exactly do you want to change on the button’s material? It might be not necessary to change the material itself, and also more efficient.

---

<div class="post-metadata">

### Author: ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)
#### Post date: [December 8, 2023, 12:12pm UTC](https://forum.babylonjs.com/t/how-to-change-the-material-of-holographicbutton/46263/3 "2023-12-08T12:12:48Z")

</div>

If it’s just the color, you only need to set it for both enter and up observables. Else, you will get erratic coloring because as you said it’s shared. But if you set both for each button, it works:

> **[Babylon.js Playground](https://playground.babylonjs.com/#2YZFA0%23396)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

### Author: ![Qq\_Xia](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq_xia/32/27770_2.png) [@Qq\_Xia](https://forum.babylonjs.com/u/Qq_Xia)
#### Post date: [December 8, 2023, 1:01pm UTC](https://forum.babylonjs.com/t/how-to-change-the-material-of-holographicbutton/46263/4 "2023-12-08T13:01:45Z")

</div>

Thanks for your reply !! I want to change the colour of the button and make it a little bit transparency. You are right, I should juste change the material itself !

---

<div class="post-metadata">

### Author: ![Qq\_Xia](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq_xia/32/27770_2.png) [@Qq\_Xia](https://forum.babylonjs.com/u/Qq_Xia)
#### Post date: [December 8, 2023, 1:05pm UTC](https://forum.babylonjs.com/t/how-to-change-the-material-of-holographicbutton/46263/5 "2023-12-08T13:05:04Z")

</div>

Thanks for this link playground !! I understand better, any chance that you know how to add a background in stackPanel3D ? I want to do a sidebar with buttons, so I would like to have a background in stackPanel3D.

---

<div class="post-metadata">

### Author: ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)
#### Post date: [December 8, 2023, 1:55pm UTC](https://forum.babylonjs.com/t/how-to-change-the-material-of-holographicbutton/46263/6 "2023-12-08T13:55:32Z")

</div>

It’s not possible to add a background to StackPanel3D since it’s just a container for 3D elements, but you could create a plane behind the panel to serve as “background”: [Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#HJZBRG#328)

---

<div class="post-metadata">

### Author: ![Qq\_Xia](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq_xia/32/27770_2.png) [@Qq\_Xia](https://forum.babylonjs.com/u/Qq_Xia)
#### Post date: [December 11, 2023, 10:10am UTC](https://forum.babylonjs.com/t/how-to-change-the-material-of-holographicbutton/46263/8 "2023-12-11T10:10:38Z")

</div>

Thanks!!! 😊
