Styling buttons in Sugarcube

0 votes
asked Mar 9 by cuffer (130 points)
I'm styling the link choices as buttons which I want to make go full width rather than a set px width. I'm using the following code in the css:

button {
    margin: auto;
    width: 100%;
      text-align: center;
  background-color: black;
  font-family: 'Nunito Sans', sans-serif;
color: white;
    letter-spacing: 1px;
text-decoration: none;
  border: 1px solid white;
  padding: 3px 23px;

This works perfectly for the links which I'm writing as follows:

<<button [[Next|PageName]]>><</button>>

But the button styling is affecting the side bar arrow > making it centred so that you cant see it when collapsed. Is there a way to target just the buttons in the passage and not the sidebar or vice versa?

1 Answer

+1 vote
answered Mar 9 by TheMadExile (38,930 points)

Make the passage class part of your selector.  For example:

.passage button {
	/* blah */


commented Mar 11 by cuffer (130 points)
Fantastic thank you
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.