Create a SquareSpace button (not button block) with custom CSS code to go back on page in browser history

Site URL: https://vizchange.net

I have a website where I present climate and weather data visualizations. I have it setup on several tablet and touchscreen computers at a national park visitor center and hotel. I am trying to minimize the scrolling on pages to encourage the website to be explored as much as possible, so I am trying to limit any hurdles on various devices, for example, scrolling.

If you go to an example visualization (blog entry), I would like to add a button that takes the user back a single page. I have found code to do this, but it has limitations. For example, I would like the button to be styled by the SquareSpace site to keep the buttons consistent. Alternatively, if I add a 'button' block then I cannot add CSS/HTML code to the button, only navigation to a specific page. I would like simply to have the user go "back" one page in the browser history. Suggestions?

BTW: I currently have a "Back" button on each page, that simply references other pages on the site. This is not ultimately what I wanted. Further, I really want a very small button visible on the page, but not a distraction like the current situation. It is only at the top to make it clear to users on touchscreen tablets who do not automatically think to scroll down to find the page navigation button. If you have better solutions in mind, please do share.

Hi @keithwlarson,

Use the code you've found from before and add a class to it. Then, style the class to match your other buttons.

<input class="new-button-class" type="button" value="Go Back From Whence You Came!" onclick="history.back(-1)" />    

.new-button-class {
  padding: YOURPADDINGHERE;
  color: YOURCOLOURHERE;
  background: YOURBACKGROUNDCOLOURHERE;
}

etc

3 hours ago, Kwamzilla said:

Hi @keithwlarson,

Use the code you've found from before and add a class to it. Then, style the class to match your other buttons.

<input class="new-button-class" type="button" value="Go Back From Whence You Came!" onclick="history.back(-1)" />    

.new-button-class {
  padding: YOURPADDINGHERE;
  color: YOURCOLOURHERE;
  background: YOURBACKGROUNDCOLOURHERE;
}

etc

How do I code it so that it uses the default button properties in the SquareSpace settings?

You need to check what the properties of your buttons are, using the inspect tool, and copy them.

Some should be clear from the Site Styles tab (e.g. colours and shape) but padding can be fiddly. I'm afraid it's something that has to be done manually.