Custom CSS Button help

[motion2082]

Does anyone know how to create a custom css style for a button?

The required style (default, primary, destructive, plain) seems to override any custom css in the snippets folder.

Alternately how can you add additonal styles so you don't need to use the four above?

[mProjectsCode]

What have you tried? How does your CSS selector look like?

The following example should work.

style: primary
label: Open Meta Bind FAQ
class: my-css-class
action:
  type: command
  command: obsidian-meta-bind-plugin:open-faq

.mb-button.my-css-class > button {
  rules: here;
}

[cgthunderstrike]

help me pls i dont know how to use any of the code i find here

[cgthunderstrike]

pls help i dont know what any of that means lol

[motion2082]

Hi Cgthunderstrike,

Inside your .obsidian/snippets folder create a .css file

Add this test button code called "my-custom-btn" below

// Based on this structure

.mb-button.my-custom-btn > button {
  rules: here;
}

// Then add to MetaBind class

// Snippets CSS File contains

.mb-button.my-custom-btn > button {
    background-color: #fbeee0;
    border: 2px solid #422800;
    border-radius: 30px;
    box-shadow: #422800 4px 4px 0 0;
    color: #422800;
    cursor: pointer;
    display: inline-flex; /* Use inline-flex for better alignment */
    align-items: center;  /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    font-weight: 600;
    font-size: 16px;
    padding: 10px 20px;   /* Adjust padding as needed */
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    min-width: 100px;      /* Minimum width to prevent cut-off */
  }

// Tip for CSS Beginners

1. Copy button you like from https://copy-paste-css.com/
2. Use Claude Sonnet or ChatGPT with Canvas to help you convert a style you find into the final code using css structure above
3. Add to snippets
4. Test and adjust

// End Result is something like this

[mProjectsCode]

I updated the docs page on styling with an example on how to style buttons.
https://www.moritzjung.dev/obsidian-meta-bind-plugin-docs/guides/stylingandcss/#button-styling-example

[motion2082]

Thank you Moritz for updating the documentation.

I created a video dedicated to creating buttons with Meta Bind
https://www.youtube.com/watch?v=dP33gV_R1wo&t=498s

This might help anyone else who is looking to customise their Meta Bind Buttons inside Obsidian

Thank you again for your hard work!