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
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
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
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.