How to put a custom css role into a function

Anvil Q&A
11

Two bits with your role.

One is that the roles are HTML classes, so you need the period in front of it, e.g.:

.anvil-role-btnround{
  border-radius:50px;
  border: 2px;  
  padding:3px;
}

The other is, as you found, an Anvil “button” is the div and the actual button inside the div. Any CSS roles you create that need to target the HTML button element need to be adjusted to target the child of the div.

.anvil-role-btnround > .btn {
  border-radius:50px;
  border: 2px;  
  padding:3px;
}

You can find examples of button roles in your app’s theme.css (that’s where I grabbed the technique from).

2 Likes