Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

(Harlowe - Twine 2) How do I style passage links to look like buttons?

Any kind of button will do. I'm just trying to clean up the look of my story.

Comments

  • 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...
    tw-link, .enchantment-link {
    	display: inline-block;
    	padding: 0.5em 1em 0.5em 1em;
    	background-color: orange;
    	margin: 0.5em;
    	border-width: 1px;
    	border-style: solid;
    	border-color: black;
    	border-radius: 10px;
    }
    

    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.
  • I used a CSS Button Generator and changed the first line to
    tw-link, 	.myButton {
    

    The entire string is below:
    tw-link, 	.myButton {
    	-moz-box-shadow:inset 0px 0px 0px 0px #a6827e;
    	-webkit-box-shadow:inset 0px 0px 0px 0px #a6827e;
    	box-shadow:inset 0px 0px 0px 0px #a6827e;
    	background-color:#ada69f;
    	-moz-border-radius:12px;
    	-webkit-border-radius:12px;
    	border-radius:12px;
    	display:inline-block;
    	cursor:pointer;
    	color:#990000;
    	font-family:Georgia;
    	font-size:19px;
    	padding:6px 24px;
    	text-decoration:none;
    }
    .myButton:hover {
    	background-color:#c4beb8;
    }
    .myButton:active {
    	position:relative;
    	top:1px;
    }
    
Sign In or Register to comment.