How to Add Back Button in Website

In this video, I’ll show you step by step how to add a working back button to your website using HTML, CSS, and a little bit of JavaScript. It’s very easy and works on Blogger, WordPress, or any custom site.

Code

<button aria-label='Go Back' id='custom-back-btn' onclick='history.back()'>
  <svg height='48' version='1.1' viewBox='0 0 256 256' width='48' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
    <g style='stroke: none; fill: none;' transform='translate(1.4066 1.4066) scale(2.81 2.81)'>
      <path d='M 45 90 L 45 90 C 20.147 90 0 69.853 0 45 v 0 C 0 20.147 20.147 0 45 0 h 0 c 24.853 0 45 20.147 45 45 v 0 C 90 69.853 69.853 90 45 90 z' style='fill: rgb(255,36,52);'/>
      <path d='M 44.777 26.745 H 34.633 l 5.157 -5.156 c 1.562 -1.562 1.562 -4.095 0 -5.657 c -1.562 -1.562 -4.095 -1.562 -5.657 0 L 22.147 27.916 c -0.016 0.016 -0.027 0.036 -0.043 0.052 c -0.167 0.172 -0.321 0.357 -0.455 0.557 c -0.07 0.104 -0.118 0.216 -0.176 0.325 c -0.065 0.121 -0.138 0.236 -0.191 0.364 c -0.057 0.137 -0.09 0.279 -0.13 0.42 c -0.032 0.109 -0.074 0.214 -0.097 0.327 c -0.103 0.517 -0.103 1.051 0 1.568 c 0.023 0.113 0.065 0.218 0.097 0.327 c 0.041 0.141 0.074 0.283 0.13 0.42 c 0.053 0.128 0.126 0.243 0.191 0.363 c 0.059 0.109 0.107 0.221 0.176 0.325 c 0.134 0.2 0.288 0.385 0.455 0.557 c 0.016 0.016 0.026 0.036 0.043 0.052 l 11.985 11.985 c 0.781 0.781 1.805 1.171 2.829 1.171 s 2.047 -0.391 2.829 -1.171 c 1.562 -1.562 1.562 -4.095 0 -5.657 l -5.157 -5.156 h 10.144 c 8.958 0 16.248 7.289 16.248 16.248 S 53.735 67.24 44.777 67.24 h -8.635 c -2.209 0 -4 1.791 -4 4 s 1.791 4 4 4 h 8.635 c 13.371 0 24.248 -10.878 24.248 -24.248 S 58.147 26.745 44.777 26.745 z' style='fill: rgb(255,255,255);'/>
    </g>
  </svg>
</button>

<style>
#custom-back-btn {
  position: fixed;
  bottom: 24px;         
  left: 24px;        
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(44,44,44,0.2);
  border-radius: 50%;
  transition: transform 0.15s;
}
#custom-back-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(44,44,44,0.24);
}
#custom-back-btn svg {
  display: block;
}
</style>

Version 2

Once the user reach to the first page and you don’t want your users to go back outside of your website (Ex. Google) then you can set a page URL below (Highlighted Below).

<button aria-label='Go Back' id='custom-back-btn' onclick='safeBack()'>
  <svg height='48' version='1.1' viewBox='0 0 256 256' width='48' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
    <g style='stroke: none; fill: none;' transform='translate(1.4066 1.4066) scale(2.81 2.81)'>
      <path d='M 45 90 L 45 90 C 20.147 90 0 69.853 0 45 v 0 C 0 20.147 20.147 0 45 0 h 0 c 24.853 0 45 20.147 45 45 v 0 C 90 69.853 69.853 90 45 90 z' style='fill: rgb(255,36,52);'/>
      <path d='M 44.777 26.745 H 34.633 l 5.157 -5.156 c 1.562 -1.562 1.562 -4.095 0 -5.657 c -1.562 -1.562 -4.095 -1.562 -5.657 0 L 22.147 27.916 c -0.016 0.016 -0.027 0.036 -0.043 0.052 c -0.167 0.172 -0.321 0.357 -0.455 0.557 c -0.07 0.104 -0.118 0.216 -0.176 0.325 c -0.065 0.121 -0.138 0.236 -0.191 0.364 c -0.057 0.137 -0.09 0.279 -0.13 0.42 c -0.032 0.109 -0.074 0.214 -0.097 0.327 c -0.103 0.517 -0.103 1.051 0 1.568 c 0.023 0.113 0.065 0.218 0.097 0.327 c 0.041 0.141 0.074 0.283 0.13 0.42 c 0.053 0.128 0.126 0.243 0.191 0.363 c 0.059 0.109 0.107 0.221 0.176 0.325 c 0.134 0.2 0.288 0.385 0.455 0.557 c 0.016 0.016 0.026 0.036 0.043 0.052 l 11.985 11.985 c 0.781 0.781 1.805 1.171 2.829 1.171 s 2.047 -0.391 2.829 -1.171 c 1.562 -1.562 1.562 -4.095 0 -5.657 l -5.157 -5.156 h 10.144 c 8.958 0 16.248 7.289 16.248 16.248 S 53.735 67.24 44.777 67.24 h -8.635 c -2.209 0 -4 1.791 -4 4 s 1.791 4 4 4 h 8.635 c 13.371 0 24.248 -10.878 24.248 -24.248 S 58.147 26.745 44.777 26.745 z' style='fill: rgb(255,255,255);'/>
    </g>
  </svg>
</button>

<script>
function safeBack() {
  const currentDomain = window.location.hostname;
  if (document.referrer) {
    try {
      const referrerDomain = new URL(document.referrer).hostname;      
      
      if (referrerDomain !== currentDomain) {
        window.location.href = &#39;/search&#39;;
        return;
      }
    } catch (e) {
      
      window.location.href = &#39;/search&#39;;
      return;
    }
  }
  if (history.length &lt;= 1) {
    window.location.href = &#39;/search&#39;;
    return;
  }
  history.back();
}
</script>

<style>
#custom-back-btn {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(44,44,44,0.2);
  border-radius: 50%;
  transition: transform 0.15s;
}
#custom-back-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(44,44,44,0.24);
}
#custom-back-btn svg {
  display: block;
}
</style>