# How do I control sp-button css?

**URL:** <https://forums.creativeclouddeveloper.com/t/how-do-i-control-sp-button-css/5030>\
**Category:** UXP Plugin API\
**Created:** [July 29, 2022, 11:41am UTC](https://forums.creativeclouddeveloper.com/t/how-do-i-control-sp-button-css/5030 "2022-07-29T11:41:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![karpiyon](https://avatars.discourse-cdn.com/v4/letter/k/eada6e/32.png) [@karpiyon](https://forums.creativeclouddeveloper.com/u/karpiyon)\
**Post date:** [July 29, 2022, 11:41am UTC](https://forums.creativeclouddeveloper.com/t/how-do-i-control-sp-button-css/5030/1 "2022-07-29T11:41:04Z")

</div>

Hi,  
I placed an image inside an sp-button.  
How do I control it’s  
How do I control the sp-button padding inside?  
I want all the buttons to have the same width.

```auto

A button is defined like this:
 <sp-button size="s" variant="secondary" class="methodWidth_split" id="select_A_split"
          style="background: url(./images/light/preButtonLight.png)">
 </sp-button>

```

CSS:

```auto
.methodWidth_split{
  border-radius: 15px;
  background-repeat: no-repeat;
  background-position: center;
  width: 50px;
  height: 30px;
  vertical-align: middle;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 2px;
  margin-left: 2px;
  margin-right: 2px;
}

```

The height is respected but the width not.

I also want to be able to change the inner color if possible.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/e/e748df0521dc0d79b7934e9fe09a11e423203174.png)

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [July 31, 2022, 3:29pm UTC](https://forums.creativeclouddeveloper.com/t/how-do-i-control-sp-button-css/5030/2 "2022-07-31T15:29:13Z")

</div>

If you want to achieve equal widths (while keeping your layout responsive as well), I think flexbox is the same solution. Just put the buttons in a wrapper and style it with

```auto
flex-grow: 1;
flex-basis: 0;

```

> [@karpiyon](#):
>
> I also want to be able to change the inner color if possible.

By inner color do you mean the background color or the color of the image? Since the image you provided is a PNG, there might not be a way to colorize it. In a normal browser environment you could use the CSS `filter` to change the hue, but I don’t think they’re available for UXP.

I’d recommend building such simple (shape) graphics as vectors and exporting them as an svg - then you can colorize it much better.

---

<div class="post-metadata">

**Author:** ![karpiyon](https://avatars.discourse-cdn.com/v4/letter/k/eada6e/32.png) [@karpiyon](https://forums.creativeclouddeveloper.com/u/karpiyon)\
**Post date:** [July 31, 2022, 5:43pm UTC](https://forums.creativeclouddeveloper.com/t/how-do-i-control-sp-button-css/5030/3 "2022-07-31T17:43:28Z")

</div>

Thanks  
The layout is not responsive. I set a fixed width for all sizes.  
I tried applying the flex to either the parent of the button or teh button but it did not work.

What do you suggest modify below?

```auto
      <div id="methodPanel_split" class="hCenter">
        <sp-button size="s" variant="secondary" class="methodWidth_split" id="select_A_split"
          style="background: url(./images/light/preButtonLight.png)">
        </sp-button>
        <sp-button variant="secondary" class="methodWidth_split" id="select_V_split"
          style="background: url(./images/light/vButtonLight.png)">
        </sp-button>
        <sp-button variant="secondary" class="methodWidth_split" id="select_H_split"
          style="background: url(./images/light/hButtonLight.png)">
        </sp-button>
        <sp-button variant="secondary" class="methodWidth_split" id="select_M_split"
          style="background: url(./images/light/matButtonLight.png)">
        </sp-button>
        <input id="method_split" value="" type="hidden">
      </div>

```

CSS:

```auto
.methodWidth_split{
  border-radius: 14px;
  background-repeat: no-repeat;
  background-position: center;
  width: 45px;
  height: 30px;
  vertical-align: middle;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
  margin-left: 1px;
  margin-right: 1px;
}

```

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [July 31, 2022, 6:47pm UTC](https://forums.creativeclouddeveloper.com/t/how-do-i-control-sp-button-css/5030/4 "2022-07-31T18:47:00Z")

</div>

Sorry, I meant to say “Just put the buttons in a wrapper and style the children with…” - the original sentence was wrong and misleading. This should work with your current setup:

```auto
#methodPanel_split {
   display: flex;
}

#methodPanel_split > * {
   flex-grow: 1;
   flex-basis: 0;
}

```

If you need gaps between flexbox items, you can give a margin to each child and a negative margin to the wrapper to get rid of the “outside” margin.

---

<div class="post-metadata">

**Author:** ![karpiyon](https://avatars.discourse-cdn.com/v4/letter/k/eada6e/32.png) [@karpiyon](https://forums.creativeclouddeveloper.com/u/karpiyon)\
**Post date:** [August 1, 2022, 5:41am UTC](https://forums.creativeclouddeveloper.com/t/how-do-i-control-sp-button-css/5030/5 "2022-08-01T05:41:18Z")

</div>

> [@simonhenke](#):
>
> ```auto
> #methodPanel_split {
> display: flex;
> }
> 
> #methodPanel_split > * {
> flex-grow: 1;
> flex-basis: 0;
> }
> 
> ```

It works!  
Thou the margin is still more then I would want.  
Each inner image is 26px wide and the width of the button should be, in the case below 26px with 0 padding, yet i get hits:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/3/3990c9e5a34dc3d5facbdb748455add8b4e27f35.png)

BTW, what does the “\> \*” do? why does it not work if I place all the styles under a single CSS rule?

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [August 1, 2022, 6:10am UTC](https://forums.creativeclouddeveloper.com/t/how-do-i-control-sp-button-css/5030/6 "2022-08-01T06:10:12Z")

</div>

I would not suggest using `*` selector. In this case `#methodPanel_split > sp-button` would be better.

@karpiyon it’s a [child combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator). Eg `#methodPanel_split > sp-button`

These buttons will match the selector:

```auto
      <div id="methodPanel_split">
        <sp-button size="s" variant="secondary" ></sp-button>
        <sp-button size="s" variant="secondary" ></sp-button>
      </div>

```

These will not:

```auto
    <div id="methodPanel_split">
      <div>
        <sp-button size="s" variant="secondary" ></sp-button>
        <sp-button size="s" variant="secondary" ></sp-button>
      </div>
    </div>

```