[Twine2/Sugarcube2] change link or button color for one button/link (not all)

Question

the idea is to change the color of a button Using CSS.

 

the code i'm trying to use:

CSS

#colorlinkblack {
 tw-link {
color: #000000;
}

}
#colorlinkwhite {
 tw-link {
color: #FFFFFF;
}

}

so, I can change link or buttons to only change when

@@#colorlinkblack;
[[link]]
@@

 

 

It's trying to help a friend with no knowledge and it's getting me confused. while i know this code doen't work and the way it's shown only applies for links, is there a way to set this up so only buttons in the
 

@@#colorlinkblack;
<<button [[link]]>><</button>>
@@

 

Answer 1

Unless you'll only be applying these styles to one button per page you'd be better off using classes.  Also, the tw-link element is a Harlowe-ism that is unsupported by other story formats.

Example styles:

.link-black a {
	/* style properties here */
}
.link-white a {
	/* style properties here */
}
.button-black button {
	/* style properties here */
}
.button-white button {
	/* style properties here */
}

Example usage:

/* Link markup. */
@@.link-black;[[link]]@@
@@.link-white;[[link]]@@

/* <<link>> macro. */
@@.link-black;<<link [[link]]>><</link>>@@
@@.link-white;<<link [[link]]>><</link>>@@

/* <<button>> macro. */
@@.button-black;<<button [[link]]>><</button>>@@
@@.button-white;<<button [[link]]>><</button>>@@