There are a number of CSS properties you can assign to the Harlowe tw-link, .enchantment-link CSS selector to cause both markup-based and macro-based links to look like buttons.
a. display: this may need to be set to one of the block related values depending on if your links can appear sequential on the same line.
b. padding: used to add (background) space between the link text and the edge of the 'button'.
c. background-color: used to fill the space between the link text and the edge of the 'button' with colour.
d. margin: used to add space between the edges of sequential links.
e. border: used to highlight the edge of a 'button'
Assuming your passage content looks something like the following...
[[Markup based link 1->Next]][[Markup based link 2->Next]](link: "Macro based link 1")[](link: "Macro based link 2")[]
... then CSS like the following placed within your story's Story Stylesheet area could be used to style it...
Comments
a. display: this may need to be set to one of the block related values depending on if your links can appear sequential on the same line.
b. padding: used to add (background) space between the link text and the edge of the 'button'.
c. background-color: used to fill the space between the link text and the edge of the 'button' with colour.
d. margin: used to add space between the edges of sequential links.
e. border: used to highlight the edge of a 'button'
Assuming your passage content looks something like the following... ... then CSS like the following placed within your story's Story Stylesheet area could be used to style it...
If you want all your links to be of a similar width and height then you will also need to learn about the width and height CSS properties.
The entire string is below: