How to override button style

Hi,
I am in the process of migrating my plugin to UXP.
I am trying to override a button CSS, in this case the border-radius and width.

This is by button:

       <button variant="secondary" class="methodWidth" id="selectPresets_split" 
      style="background: url(./images/light/preButtonLight.png)">
      </button>

The CSS for methodWidth:

.methodWidth{
  border-radius: 2px;
  background-repeat: no-repeat;
  background-position: center;
  width: 38px;
  height: 26px;
  vertical-align: middle;
}

In the debugger it looks as if teh radius is respected but in teh DOM it is not.

I do not have any button selector in my css.
How do I change the button radius?
I also need to change the :hover

If I set:

button:hover {
  color: rgb(255, 0, 21);
}

When I hover over the button the border disappears and never comes back.

This is my CEP, with the buttons, in red, which I try to migrate:

Looks like you’ve managed to get radius style which I couldn’t :smiley: Otherwise I can only wish you good luck :smiley: It’s a trial and error with buttons UI and behavior changes with Ps updates, so no guarantees if the result you get will also be the same in next version (not talking here just about border radius or hover)

I think it’s better to use sp- components as much as you can because as Karmalakas said the behavior for the native HTML elements is going to change from version to version and eventually they will become obsolete. That’s why the recommendation is to use the spectrum components. For example, this button you are trying to migrate could be now sp-action-button.
Please look at this page to see what it looks like and for some code samples: https://developer.adobe.com/photoshop/uxp/uxp/reference-spectrum/User%20Interface/sp-action-button/

Then is there a way to use the “name” attribute in sp-radio-group to span it along different lines as shown on my example.
I need to add some images in between the buttons. I tried to use teh sp-radio but i could not alter it’s css

if you use the code that I sent you in this this post, then it would wrap automatically depending on the container width. As you can see there I set it to 200px but it can be any size. You can even remove that hardcoded value in order to make it flexible so the options will automatically go into a new line when the container gets smaller (on a plugin window resize for example).

Please look at the images below to see what I meant by a flexible container:

image

image