Anki Forums

Card Template - CSS does not apply to buttons properly?

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:


Back Template:




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.

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.)

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

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.


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


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

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

1 Like