Making a button

Authoring Twine
1

I have a custom button I want to use withing my passages. The problem is it also changes the buttons on the UI. How can I make it so the buttons work in passages without changing the UI buttons?

This is the CSS code:

button {
  border: none;
  width: 140px;
  height: 50px;
  color: #fff;
  z-index: 1;
  display: flex;
  background: #000;
  position: relative;
  cursor: pointer;
}

button p {
  margin: 0 auto;
  align-self: center;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
}

button::after {
  position: absolute;
  content: "";
  width: 100%;
  z-index: -1;
  height: 10%;
  bottom: 0;
  clip-path: polygon(
    0% 74%,
    4% 75%,
    8% 76%,
    11% 77%,
    15% 78%,
    20% 78%,
    25% 77%,
    32% 77%,
    37% 75%,
    40% 74%,
    43% 74%,
    46% 73%,
    52% 72%,
    57% 72%,
    65% 74%,
    66% 75%,
    71% 78%,
    75% 82%,
    81% 86%,
    83% 88%,
    88% 91%,
    90% 94%,
    94% 96%,
    98% 98%,
    100% 100%,
    82% 100%,
    0 100%
  );
  background: #8792eb;
  transition: 0.2s ease;
}

button::before {
  position: absolute;
  content: "";
  /*   bottom: 80%; */
  transform: rotate(180deg);
  width: 100%;
  height: 10%;
  transition: 0.2s ease;
  /*   bottom:; */
  z-index: -1;
  clip-path: polygon(
    0% 74%,
    4% 75%,
    8% 76%,
    11% 77%,
    15% 78%,
    20% 78%,
    25% 77%,
    32% 77%,
    37% 75%,
    40% 74%,
    43% 74%,
    46% 73%,
    52% 72%,
    57% 72%,
    65% 74%,
    66% 75%,
    71% 78%,
    75% 82%,
    81% 86%,
    83% 88%,
    88% 91%,
    90% 94%,
    94% 96%,
    98% 98%,
    100% 100%,
    82% 100%,
    0 100%
  );
  background: #8792eb;
}

button:hover::after {
  clip-path: polygon(
    0 30%,
    9% 34%,
    7% 39%,
    11% 43%,
    13% 33%,
    17% 30%,
    24% 34%,
    25% 35%,
    30% 31%,
    30% 38%,
    39% 33%,
    35% 43%,
    43% 45%,
    55% 46%,
    65% 74%,
    67% 66%,
    81% 57%,
    75% 82%,
    81% 86%,
    83% 88%,
    88% 91%,
    90% 94%,
    94% 96%,
    98% 98%,
    100% 100%,
    82% 100%,
    0 100%
  );
  height: 80%;
}

button:hover::before {
  clip-path: polygon(
    0 30%,
    9% 34%,
    7% 39%,
    11% 43%,
    13% 33%,
    17% 30%,
    24% 34%,
    25% 35%,
    30% 31%,
    30% 38%,
    39% 33%,
    35% 43%,
    43% 45%,
    55% 46%,
    65% 74%,
    67% 66%,
    81% 57%,
    75% 82%,
    81% 86%,
    83% 88%,
    88% 91%,
    90% 94%,
    94% 96%,
    98% 98%,
    100% 100%,
    82% 100%,
    0 100%
  );
  height: 80%;
}

This is the code I use in the passages.

<button style="top: 2%; left: 4%;" onclick="$.wiki('<<goto &quot;Yes&quot;>>')" tabindex="0">Yes</button>

I like the button but it messes up the UI with the back button and the save buttons.

2

in the css you can do:

.passage button {/*your code*/}

to affect only the button in the passage

Also there is a macro called button already…

<<button [[Yes]]>></button>>

you can wrap it in a span or a div to give it special stying. No need to use jQuery.

3

this sort of works. the problem is im still coming up with a generic button not the special one I wanted to use. When i try the html code that came with the button it transforms the entire passage blank.

4 
<span class = "special"><<button [[Yes]]>></button>></span>

in the CSS

.special button { /*your special formatting* /}

.special button::before { /*your special formatting* /}

.special button::after { /*your special formatting* /}

What do you mean by that?
Did you use code from somewhere else? (if so, you may want to indicate - that’s relevant info)

5

Yea the code for it is from getcssscan theres tons of buttons with the css code just nothing about html to post them

6

Right. So what was the HTML code you put with the button ?

Also, buttons are included in SugarCube, and it’s 99% of the time best to use the button macro than random HTML code…

7

I tried a couple different ones including the button macro

these are a few I had found but couldnt get to work. The last one you gave me did work with some css codes for buttons but not all.

<div class="container">
  <a class="button" href="#" style="--color:#1e9bff;">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Button
  </a>
  <a class="button" href="#" style="--color: #ff1867;">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Button
  </a>
  <a class="button" href="#" style="--color: #6eff3e;">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Button
  </a>
</div>

this one I tried tweaking a bit with the goto macro

<button class="button-89" role="button">Button 89</button>

This is one I used before for a different game.

<button style="top: 2%; left: 4%;" onclick="$.wiki('<<goto &quot;livingroom&quot;>>')" tabindex="0">Living Room</button>
8

I think you might have better luck if you start from the button macro and edit the CSS to make it work as you want it to be, rather than adding HTML button/links with jQuery. Mainly because it gets less messy on the passage (assuming this code is not in StoryInterface) and you can do a lot more with it, but also because it is more accessible to screenreaders (ARIA).

<div class="container">
  <span class="special-one"><<button "Button">>/*some potential code*/<</button>></span>
  <span class="special-two"><<button [[ButtonLink]]>>/*some potential code*/<</button>></span>
  <span class="button-89"><<button "Button 89">>/*some potential code*/<</button>></span>
</div>

.container button {
  border: none;
  width: 140px;
  height: 50px;
  color: #fff;
  background: #000;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
 /*potentially some padding if you want more space around the text*/
/*z-index : 1;  <- could be more depending on where the buttons are placed on the page. */
}
1 Like