Style a button with CSS

UI Builder
1

I have created a custom class in css in my theme


.testButton {
  color: blue;
  
  width: 118px;
  height: 48px;
  border: 1px solid #000000;
  border-radius: 48px;
  box-shadow: #FF0000;
}

but, when I apply it to a button, the color property isn’t respected (see preview screenshot below). What is the best way to stylize the button text color in the CSS?

Thanks,

Josh

Screenshot 2022-12-12 at 8.57.22 AM
Screenshot 2022-12-12 at 8.57.22 AM784×421 3.26 KB

2

Hello @joshua-parmenter!

You can change the color this way:

image
image1212×728 53.5 KB

You can look at the structure of the component in devTools, and that way you will know which classes you need to assign styles to:

image
image2984×702 238 KB

Regards,
Alexander

3

Thanks @Alexander_Pavelko - I feel pretty comfortable inspecting for that, but I’m setting up the codeless / UI Builder environment for a team mate that won’t be comfortable with doing that. Is there documentation in the system yet for showing what CSS can be edited in this way? Or is it more of a case where this is a skill someone needs to pick up anyways in a low-code environment? I’m fine telling them either way, but want to make sure I tell them the easier way (via documentation) if it already exists. Thanks!

4

I think this great guide from my colleague will be helpful to you:

Regards,
Alexander

1 Like
5

Rad- thank you sir.

1 Like