Issues with the button macro

Authoring Twine
,
1

Twine Version: 2.10
Format: Harlowe 3.3.9

I’ve been having many issues with Twine lately as a beginner, but one of them has been making a button. I simply edited a passage link to look like a button, but only the text was clickable so I scrapped it. I discovered the (button:) macro and boy am I STRUGGLING. I’ve been playing around with the coding, and this is what I have so far.

Screenshot 2025-02-10 9.31.54 AM
Screenshot 2025-02-10 9.31.54 AM696×323 59.2 KB

(text-color:black) + (bg: white) + (corner-radius:5) + 
(button: "===><===" )[ [[Hello]] ]

I’ve been testing many different things, but there are two things I’m struggling with.

1. I want the outline of the button to be a different color than the text.
2. I want the background color to be inside the button.

Coding in corner-radius doesn’t work, and I even tried adding an image instead, it doesn’t work. The other option would be to make the button not rounded, but I can’t seem to figure that out either.

I would like to note that while I am new to Twine, I have had quite some experience with CSS. However, I am trying to keep the majority of my code within the passage editor. If necessary, I can use CSS, such as how I did with the background image.

2

As shown in the (button:) macro’s documentation, it is applied either directly:

  • to a Markup based Link…
(button: "===><===")[[Hello]]

(text-color:black) + (bg: white) + (corner-radius:5) + (button: "===><===")[[Hello]]
  • via an argument to specific members of the “link” family of macros
(link-reveal-goto: "Hello", "Hello", (button: "===><==="))[]

(link-reveal-goto: "Hello", "Hello", (text-color:black) + (bg: white) + (corner-radius:5) + (button: "===><==="))[]
(text-color:black) + (bg: white) + (corner-radius:5) + (button: "===><===")

Or indirectly via one of the “change/enchant” family of macros that targets a Named Hook, like the special ?Link named hook…

[[Hello]]

(change: ?Link, (text-color:black) + (bg: white) + (corner-radius:5) + (button: "===><==="))

You mentioned using CSS instead, which you can do once you’ve used your web-browser’s Web Developer Tools to determine that a Markup based Link like…

[[Hello]]

…generates the following HTML structure…

<tw-expression type="macro" name="link-goto" return="command">
    <tw-link tabindex="0" data-raw="">Hello</tw-link>
</tw-expression>

…so a CSS Rule like the following placed in your project’s Story Stylesheet area would product a similar “button” to the 1st of my direct method examples…

tw-expression[name="link-goto"] {
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
	border-radius: 5px;
	margin-left: 37.5%;
	width: 25%;
	display: block;
	padding: 5px;

  	tw-link {
		color: inherit;
		border-radius: 16px;
		border-style: solid;
		border-width: 2px;
		text-align: center;
		padding: 0px 8px;
		display: block;
  }
}