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