Button Plugin CSS question

Help
1

Things I have tried

  1. Searching the Help forum. Nothing popped up equal to what I was looking for.
  2. Watched the help videos from developer. Didn’t go over the Custom Class section.
  3. Searched Google with no results.

On MacOS Monterey 12.2, Obsidian 13.23, Button plugin 4.16, Sanctum theme

What I’m trying to do

I’m trying to add a custom class to the Button plugin in the Custom Class section in the Button Maker. I’ve tried creating a snippet (mybutton) and entering that into the field. That didn’t work. I tried entering the entire CSS into the resulting code, still didn’t work. I’m not sure what I’m doing wrong.

Any help would be appreciated!

TIA,
April

2

I use this type CSS class in css snippets, it work perfectly for me.

.bhomelist {

    border: 0.5px solid var(--button-border);

    border-radius: var(--button-border-radius, 8px);

    background-color: #d4d4d4;

    padding: 9px 20px;

    font-weight: bold;

    text-decoration: none;

    font-size: var(--button-size);

    margin: 0 2px;

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  }

.bhomelist:hover {

    z-index: 100;

    border: 0.5px solid var(--button-border);

    background-color: #0099ff;

    color: #d4d4d4;
  }
2 Likes
3

From what I understood, you gotta create a “custom class” inside the snippet.

Therefore, inside “mybutton.css” you have to write something like:

image

the .dataview-button is your “custom class” and could be named anything you want; could also be mybutton.

The other parameters are yours to style as you prefer, as I see from the previous answer there are many more that could be added.

1 Like
4

Thanks for your reply! I have a “mybutton.css” file in the Snippets folder. Inside the file is the following:

.mybutton {

background-color: #FFE3D4;

border: 2px solid #FCB9AA;

color: #808080;

padding: 10px 15px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 14px;

margin: 4px 5px;

cursor: pointer;

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0,0,0,0.19);

width: 125px;

}

.mybutton:hover {

background-color: #E67C73;

color: white;

border: 2px solid #FCB9AA;

}

So now that I have the custom class created inside the snippet, I should be able to put the custom class name (.mybutton) into the Button Maker. Right? Even when I do enter the class name, it still won’t style correctly. The button does work, just doesn’t look like I want it to.

5

Is this

image

how you want it to be customized?
Beside Button Maker, you have to check the code you have made with it

image

to see if class has an assigned hmtl class, in your case mybutton (without the .).

Also, if you haven’t done it yet, you should check “Appearances” to see if your CSS is active.

image
image1545×916 92 KB

6

Thank you for responding. Yes, that’s what I’d like my button to look like.

I do have the Snippet turned on:
buttonmaker_csssnippets

When creating the button, I add the CSS class but the preview does not update:
buttonmaker_cssclass

In the note, the button code looks like this:
buttonmaker_buttonhtml

But it still doesn’t work:
buttonmaker_actualbutton

I don’t think it’s the Obsidian theme because I’ve tried several different ones and it still happens. If you got it to work, maybe my copy of Buttons is corrupt?

7

Mmh I don’t know, everything seems to be correct.

You could try setting up an empty vault and reproduce the steps to see if you have the same result

8

Thanks for your help. I may do that!

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.