Custom styled button

Howdy

I am trying to create a custom styled button. Initially i just wanted to style the anvil button component with bootstrap, by calling btn btn-primary using Roles. But it did not work.

Then i tried copying the css from here and replaced the class name with the .anvil-role-foo. But it did not work.

Then i tried targeting the class .btn-default class but it seems that my properties is overwritten somehow.
In chrome dev tools the “only” properties that are being applied are:

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

In theme.css

.btn-default{
  background-color: #EA4C89;
  border-radius: 8px;
  border-style: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 20px;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 10px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

My project is super simple so it is kind of frustrating that this “easy” task will not work.

Clone link:
share a copy of your app

You hadn’t created any CSS for foo role or added the role to your button.

Here is a working example Anvil | Login

Refer to the docs for more about Roles and CSS

Anvil Docs | Roles

In your working example, the button still ends up looking like this when you run it:

image

Seems some bootstrap-like rules are overriding the role. How to overcome this?

actually, pretty simple, overriding the default .btn property like this does the trick:

.anvil-role-custom-button .btn {
1 Like

I was racking my brain trying to edit the button styling until I found this. It turns out you need that (.btn) because you’re actually targeting a ‘descendant’ of the anvil button.