What colors are allowed for the buttons?

[wealthychef1]

I nkow I can use "blue" and "yellow" because they are mentioned as examples, but is there a way to say color #6666FF or the equivalent? Thanks.

[sm-alejandro]

I have looked a bit into the Debug Console and the plugin essentialy what it does is it appends the color name to the class. So the buttons end up having the class: button-default color. That means that it depends on your theme. Minimalist includes Red, Blue, Purple, Green and Yellow. But you can create your own colors adding this snippet to your theme:

.button-default.yourcolorname {
    background-color: #yourhex !important
}

I tried it with orange for example using var(--color-orange) which was already defined as a variable in the theme.

[wealthychef1]

Lovely, thanks! Appreciate the followup comment too. But I see it's been removed. Was this bad info?

Just to make sure, for those who don't know css. You have to substitute the first appearance of "color" with the name you want to give your custom color. And "yourhex" with any color you like. background-color has to be called that.

[wealthychef1]

I tested this and I think you have a typo. I still don't understand how css classes exactly mesh with obsidian.md, but here is code that does work.
You seem to have an extra . character at the beginning of your css. So what works for me is this:

In my .obsidian/snippets/app.css file:

/* Buttons plugin coloring */
button.coolblue {
    background-color: #9999ff !important;
    color: #000088 !important; 
}

And in the markdown:

```button
type link
action https://obsidian.md
class coolblue

Note:  `color coolblue` also works in lieu of `class coolblue`

<img width="245" alt="2022-11-24 11 14 37 CleanShot Obsidian" src="https://user-images.githubusercontent.com/4825448/203692915-dd18bd80-42fb-4aaf-8166-79f9d82255a3.png">

[sm-alejandro]

No, I just edited the original comment, so that info was not needed anymore in a separate comment. Just the opposite, it was so important I wanted to make sure it was read with the original comment before someone tries something

[sm-alejandro]

.button-default

So, you are changing the name of the class in the button, that's why .button-default does not work for you. The . is used to reference a class, which in your case does not exist. You can use in your code .coolblue directly because you are giving your button that class name. If you use color blue, you have to use .button-default, which is the class given to the button per se. So color color does not work in lieu of class color. this is the official info, your way may be the intended one to use by the owner. Thanks for pointing that out

[sm-alejandro]

Follow up: If you decide to override the css class, you lose the styling that comes as default with the default button. I realised that the default button, has some margins right and left. So you may want to use the case that suits you best

[sm-alejandro]

Another follow up: For best results, create new classes and don't change the default ones. If you want similar styling to the default buttons add a bit of margin like this.