How can I make two different types of buttons?

Question

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.

Answer 1

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!  :-)

Comments

Works like a charm, thank you so much!