Need help formatting button CSS in Obsidian

Basement
2

Obsidian supports custom CSS -> https://publish.obsidian.md/help/Plugins/Custom+CSS

You need to add a obsidian.css file in the root of your vault and turn on “Custom CSS” in Settings -> Appearance.

Then you can style your button however you want. I would suggest applying a class or ID to your button so you can target it specifically without possibly effecting other buttons in the app.

So your HTML might look like this:

<form action="https://www.notion.so"> <button class="my-button" type="submit" width=100% >Open Notion in Browser</button></form>

and your CSS might look like this

.my-button {
  height: 200px;
  width: 200px;
}

You could also avoid a separate CSS file by adding styles inline to the HTML element:

<form action="https://www.notion.so"> <button style="height: 200px; width: 200px;" type="submit" width=100% >Open Notion in Browser</button></form>

Here’s another post about using CSS in Obsidian https://forum.obsidian.md/t/getting-comfortable-with-obsidian-css/133

3 Likes