Can I change the appearance of <<button>> macros?

Question

Using SugarCube2 in 1.x

Can I change the colour/shape of individual/all <<button>> macros?

Answer 1

This might affect more than you want it to, but you could create a passage tagged "stylesheet" that has CSS like this:

#passages button {
  background: red;
}

Not sure about shape -- it'd have to be rectangular, at least. If you want rounded corners, you could write:

#passages button {
  background: red;
  border-radius: 8px;
}

 

Comments

Nice! Thank you!

I tried putting 'text-color: red;' but that didn't work. How would I change the colour of the text?

Uh - just put 'color'! :D

Now how do I delete this dumb comment?

---

Just use color, not text-color.

---

No worries! I think it's better to leave this note in for future readers.

Answer 2

In case this is helpful, I'm going to add what I've added to my own project. I wanted to change all the default Sugarcube buttons, and used images made in photoshop to make them look a little more rugged. There is a separate image for the hover section to make it look like the button is being pressed. 

This is what I have in a stylesheet tagged passage. Disclaimer though, this will also alter the appearance of the default UI buttons like in the save menu, sidebar toggle, etc. 

button {
	cursor: pointer;
	color: 	#00FF00;
	background-image: url(images/ui/button.png);
	background-size: 100% 100%;
	border: 1px solid #ffffff;
	line-height: normal;
	padding: 0.4em;
	transition-duration: 200ms;
	user-select: none;
	border-width: 2px;
	border-radius: 3px;
	border-color: #000000;
}
button:hover {
	color: 	#00FF00;
	background-image: url(images/ui/button_hover.png);
	background-size: 100% 100%;
	border-color: #000000;
	border-width: 2px;
	border-radius: 3px;
}

 

Answer 3

If you want to alter all <<button>> macros everywhere, but only them, use:

.macro-button {
	/* style properties */
}

If you want to alter all <button> elements within the main passage display area, created by <<button>> or not, use:

#passages button {
	/* style properties */
}

If you want to alter all <button> elements everywhere, use:

button {
	/* style properties */
}

NOTE: SugarCube's UI bar menu "buttons" are not actually <button> elements and will not be affected by any of the above.

 

Answer 4

Very, very late reply, but figured I might as well since I went through the same experience and it's probably helpful for this to be out there:

 

This site: http://www.bestcssbuttongenerator.com/ is incredibly useful for visualizing button appearance and finding something you're happy with. Saves you a lot of time fiddling with CSS and "testing" in Twine for every button swap.