How to style individual buttons on a single page in sugarcube 2?

puppetz87

Hello all. Simple question: I want to have a few buttons on the same passage, and I want to style each of them differently.
I have absolutely no idea how to do that. If I edit the button class in the stylesheet, every button changes accordingly.

Can anyone help?

Superechidna

If you wrap the buttons in individual <div> tags, you can style them separately. Say I have two buttons that don't do anything but I want them to be red and green.

<div class="redb">
	<<button "This does nothing and is red!">>
	<</button>>
</div>
<div class="greenb">
	<<button "This does nothing and is green!">>
	<</button>>
</div>

If you wanted to style the backgrounds of them separately you would target them based on their classes. This simple CSS would change the backgrounds to red and green respectively.

.redb button {
  background-color:red;
}
.greenb button {
  background-color:green;
}

TheMadExile

Superechidna is on the right track, though I'd ensure no extraneous whitespace was created and change the wrappers to an inline element—e.g. <span>—rather than a block element.

For example:

<span class="redb"><<button ".redb styled button">>
	…
<</button>></span>

<span class="greenb"><<button ".greenb styled button">>
	…
<</button>></span>

puppetz87

Thanks guys. Yea the whitespace turned out to be a problem with line formatting. Cheers.