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 = '/search'; return; } } catch (e) { window.location.href = '/search'; return; } } if (history.length <= 1) { window.location.href = '/search'; 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>