Need help formatting button CSS in Obsidian

Basement
1

Hi, I am using the button tag to insert a button, which opens an APP in the browser (Notion in this case). I need help to edit the button size (height and width). I’m a noob in CSS, so please let me know if this is possible by any means. And explanation if it does not.

This is the code I am using

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

it yields a narrow button which only covers the sentence OPEN NOTION IN BROWSER

Thanks in advance

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
3

Thank You so much. I have unlocked a whole new set of customizations using these buttons, now that they are of custom width as required.

I have added custom CSS classes (to the obsidian.css file)defining the attributes as required.

2 Likes