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 (44.7k 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!
This site has been placed in read-only mode. Please use the Interactive Fiction Community Forum instead.
...