I know how to resize the buttons in stylesheet but is there someway to resize an individual button to fit the text that is in it?
<center><<link "<div id=button>Hallway</div>" "upstairs">><</link>></center>
this is the button I use
There is already a button macro in SugarCube btw 
<<button [[Hallway|upstairs]]>><</button>>
(in the css: button {/*css rules*/})
If you want to edit the formatting of a specific one, just wrap the whole thing into a div/span rather than the text inside:
<div id="this-button"><<button [[Hallway|upstairs]]>><</button>></div>
(in the css: #this-button button {/*css rules*/})
Yea this is a special button that was made its rounded and has a hover feature that the color and stuff changes when you hover. I just wanted to be able to make it so that the text fit the button without a lot of extra space within the button
You should also provide us with this code then
It’s relevant to the question
EDIT: you can also change the space “in” the button (if you use the macro), it’s all about padding. padding: [amount]
yea that would probably be smart lol
#button {
display: inline-block;
background-color: rgba(0, 0, 0, 0.9);
border: 2px solid red;
border-radius: 25px;
padding: 5px 5px 5px 5px;
box-shadow: 1px 1px 1px Black;
font-size: 120%;
width: 45%;
text-align: center;
cursor: pointer;
text-decoration: none;
}
#button:hover {
background-color: red;
color: black;
border: 2px solid white;
letter-spacing: 0.5px;
z-index: 10;
text-decoration: none;
}
yea the problem im running into is I have some buttons that might say Continue while I have others that will say Teach that person a lesson so it wont fit the button it just makes it taller because of the % I have it set to now
yes thats what I wantso that theres not all the extra space befoe and after hallway
wouldnt that make all the buttons the same size though? I was hoping to find a way to do individual ones so that longer text would expand the button. I mean i can live with it one size if i have to i was just looking to see if there was a way to do it within the passage for each button
No I just edited the code you posted.
Unless every button is coded as
If you only have one link per page with the id=button, then it will only target that one
some pages have one button some pages have several buttons on them. some for navigation. this is the issue i have with them
There are better options than a <center> element for centring the content in an area of the page, especially if that content isn’t textual and if there could be multiple instances of it with that area.
The following solution uses the Flex layout method, and the CSSTricks A Complete Guide to Flexbox article is a good place to learn about it.
1: Identify the area of the page where the “button” elements will be displayed.
The following uses an identified <div> element to indicate where the <button> elements will be displayed, this helps control the relationship each button will have with any other if there are multiple buttons. The <<nobr>> macro is used to suppress all line-breaks in that area, because wrongly placed <br> elements can cause havoc when using CSS to layout components.
Welcome to the library
<<nobr>>
<div id="options">
<<button [[Hallway|upstairs]]>><</button>>
<<button [[The quick brown fox jumps over the lazy dog|upstairs]]>><</button>>
</div>
<</nobr>>
2: Use Flex layout based CSS to layout/position the buttons within the identified area.
The following CSS tells Flex to centre the buttons being displayed in the row, and to leave a specific sized gap between each button.
#options {
display: flex;
justify-content: center;
gap: 10px;
}
3: Use CSS to style the buttons themselves.
note: The <button> element automatically adjusts its size to fit the Label being displayed in it, so I am not assigning a width to the buttons.
The following CSS is a combination of your own original example and the suggesting made by @manonamora, that I have removed the width assignment from.
#options > button {
background-color: rgba(0, 0, 0, 0.9);
border: 2px solid red;
border-radius: 25px;
padding: 5px 25px;
box-shadow: 1px 1px 1px Black;
font-size: 120%;
text-align: center;
cursor: pointer;
text-decoration: none;
}
#options > button:hover {
background-color: red;
color: black;
border: 2px solid white;
letter-spacing: 0.5px;
z-index: 10;
text-decoration: none;
}
note: The Passage code example I supplied includes the 2nd <<button>> macro call so you can see what happens when: the area contains more than one button; the button has a long label. You can delete the 2nd <<button>> macro call to see what happens when there is only one button.