0 votes
by (160 points)
closed by
Hi, in my game im using normal links to perform certain actions and buttons to navigate through the enviroment. I want to have one set of colors for the buttons that are for navigating inside buildings and another set for buttons that are for navigating outside buildings. I tried to make a widget so one of them could be <<button>> and the other <<buttonout>>, but I don't really know how to make it or even if it can be made. These are my stylesheet options:

.passage button {
    background-color: Tomato;
      color: LavenderBlush;
      font-size: 16px;
      padding: 10px 24px;
      transition-duration: 0.4s;
      float: left;
      border: 2px solid LavenderBlush;
}

.passage button:hover {
      background-color: LavenderBlush;
      color: Tomato;
      border: 2px solid Tomato;
}
      
.passage buttonout {
    background-color: LimeGreen;
      color: LavenderBlush;
      font-size: 16px;
      padding: 10px 24px;
      transition-duration: 0.4s;
      float: left;
      border: 2px solid LavenderBlush;
}

.passage buttonout:hover {
      background-color: LavenderBlush;
      color: LimeGreen;
      border: 2px solid LimeGreen;
}

The one called .passage button is the one I want to use of inside parts and the .passage buttonout the one for outside parts.

Thank you in advance for your time.
closed with the note: My question is already answered

1 Answer

+1 vote
by (37.1k points)
selected by
 
Best answer

If you just change your CSS a little bit like this:

.buttonout button {
	background-color: LimeGreen;
	color: LavenderBlush;
	font-size: 16px;
	padding: 10px 24px;
	transition-duration: 0.4s;
	float: left;
	border: 2px solid LavenderBlush;
}

.buttonout button:hover {
	background-color: LavenderBlush;
	color: LimeGreen;
	border: 2px solid LimeGreen;
}

then you can do this for the buttons you want to have that styling:

@@.buttonout;<<button "Test Color">><</button>>@@

That just uses the SugarCube custom style markup to do the equivalent of this:

<span class="buttonout"><<button "Test Color">><</button>></span>

Hope that helps!  :-)

by (160 points)
Works like a charm, thank you so much!
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...