Card Template - CSS does not apply to buttons properly?

Anki Card Design
1

Hi there. :slight_smile:

I spend some time designing card types the last days. I wanted to add custom buttons to one of them, when I found some (to me) weird behavior between html buttons and css styling in anki.

Source Code for testing purposes:

Front Template:

{{Front}}

Back Template:

Button

Styling:

.button{

background-color: red;

}

When input like this, the button shows as default. Interestingly enough, when i put < followed by any text (e.g.<asdf) infront of the button code, it works. Code than looks like this:

Back Template

<asdf Button

The button is red then.

I would really appreciate an explanation, if there’s one. Apparently, the little coding knowledge I have is not sufficient to make sense of this.

2

Where it just says “button” in the code it should really say: <.button class=“button”>Button<./button>" (dots added in order to prevent auto-formating.)

3

In the editor here, you can use “Preformatted text” to show your code:
image

In the order to color button red, use:

<button style="background: red">foo</button>

The reason for this is that Anki applies its own default CSS. You have to make sure that your CSS has higher precedence.

The Anki WebViewInspector helps a lot trying to figure out what’s happening in your templates.

4

In your CSS definition, you should probably change .button (interpreted as class) to just button (HTML tag).

5

Anki WebViewInspector really helped to give me a better understanding of what’s going on! :slight_smile:

6

Changing it to button.button{} worked :slight_smile: Thanks a lot to both of you!