EverWeb Codebox

Go Back Button Link

HTML5 & CSS

A Go Back is useful for returning the visitor to the page they previously visited - rather than the previous page in the site's navigation - if placed at the bottom of a page. There's not a lot of point in placing it at the top of the page since the visitor can easily use the browser back button.

A "Go Back" button can be created using the HTML5 button element and CSS to style it. The HTML goes like this...


<button class="goBack" type="button" onclick="history.go(-1)">Go Back</button>


The button and hover styles are created using this CSS...


<style type="text/css">

button.goBack{

width:auto;

font:16px Trebuchet MS, sans-serif;     /* Font size and family*/

color:#CCCCCC;     /* Font color */

background:#000FFF;     /* Background color */

margin:0;

padding:5px 10px;     /* First value is top/bottom padding & the second is left/right. Increase/decrease as required */

border:none;

-moz-border-radius:7px;

-webkit-border-radius:7px;     /* Corner radius. Change all three values */

border-radius:7px;

-moz-box-shadow:0 0 5px #000;

-webkit-box-shadow:0 0 5px #000;     /* Box shadow radius and color */

box-shadow:0 0 5px #000;

cursor:pointer;

}

button:hover.goBack {

background:#000000;     /* Hover background color */

color:#FFFFFF;          /* Hover color */

}

</style>


If the button is to be used on several pages, paste the styles into the Head Code box in the EverWeb Site Publishing Settings page. Then insert the HTML in an HTML Snippet on any page where the button is required.


NOTE: If using the button on a mobile website, there's no need to bother with the hover styles - marked in green - so they can be deleted.