# How i can create block with many buttons.

**URL:** https://phaser.discourse.group/t/how-i-can-create-block-with-many-buttons/12065
**Category:** Phaser 3
**Created:** [July 26, 2022, 3:12pm UTC](https://phaser.discourse.group/t/how-i-can-create-block-with-many-buttons/12065 "2022-07-26T15:12:44Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![ppridanov](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/ppridanov/32/6781_2.png) [@ppridanov](https://phaser.discourse.group/u/ppridanov)
#### Post date: [July 26, 2022, 3:12pm UTC](https://phaser.discourse.group/t/how-i-can-create-block-with-many-buttons/12065/1 "2022-07-26T15:12:44Z")

</div>

Hello. My name is Peter. How can I create a container with buttons, with the same padding between them? Buttons have text and a sprite that I create in a container. I’m new and maybe I’m missing something.

This is the button code:

```javascript
export default class ButtonContainer extends Phaser.GameObjects.Container {
    bet
    amount
    amountText
    constructor(scene, x, y, texture, onClick, text) {
        super(scene, x, y);
        const button = new Button(scene, texture, onClick);
        this.add(button);
        this.amount = '';
        var style = { font: "32px Arial" };
        const buttonText = this.scene.add.text(0, 0, text, style).setOrigin(0);
        buttonText.x = button.width / 2 - buttonText.width / 2;
        buttonText.y = button.height / 2 - buttonText.height / 2;
        this.bet = this.scene.add.container(button.width / 2, button.height / 2);
        const betImage = this.scene.add.sprite(0, 0, 'bet');
        this.amountText = this.scene.add.text(0, 0, this.amount, {color: 'black', fontFamily: 'Calibri'}).setOrigin(.5)
        this.bet.add(betImage);
        this.bet.add(this.amountText);
        this.add(buttonText);
        this.add(this.bet);
        this.bet.alpha = 0
        this.setScale(1.05)
        return this;
    }
    setBetAmount(text: String) {
        this.amountText.text = this.amount;
        this.bet.alpha = 1;
    }
    clearBetAmount() {
        this.amountText.text = '';
        this.bet.alpha = 0;
    }

}

```

This is the current container:

```javascript
export default class Row extends Phaser.GameObjects.Container {
    constructor(scene, x, y, elements, texture) {
        super(scene, x, y);
        elements.forEach((element, idx) => {
            this.add(new ButtonContainer(scene, 0 + idx * 165, 0, texture, ()=>console.log(element), element))
        })
        scene.add.existing(this);
    }
}

```

My code works, but when I want to replace the texture of another set of buttons, I get the wrong padding.

Thanks.