Styling buttons in Sugarcube

Question

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;
    text-transform:uppercase;
  border: 1px solid white;
  padding: 3px 23px;
      font-size:90%;
}

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?

Answer 1

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

.passage button {
	/* blah */
}

 

Comments

Fantastic thank you