Website Shop 101 - How to Make a Return Button

Welcome to lesson six of the Website Shop 101 tutorial series for crafters. You know those really cool buttons that some websites have that allow you to return to the previous page you were on? This part will show you how to make them.

---

This lesson assumes that you've already designed and created your shop buttons from lesson 2. If you haven't made a return or go back button, you should make one now. Otherwise, proceed with this lesson below...

---

Creating Your Return Button Code:

Here's what the return button code looks like, when you use an image as your button...

---

<FORM><onClick="history.go(-1);return true;"><img src="DownloadButtonImageURL" alt="Return" border="0" width="161" style="float:left"/></FORM>

---

Here's the download code breakdown:

• <FORM><onClick="history.go(-1);return true;"></FORM> is the action that causes the user to go back one page.
• <img src="" /> – you'll want to change DownloadButtonImageURL to the URL link address for your download button image.
• alt="" – this is the alternate text shown in place of the button if it doesn't load properly. Plus, it serves as SEO. Change Download to whatever description you'd like. It is optional.
• border="" – the standard is to leave it at 0 but you can adjust the number.
• width="" – this is helps you adjust the width of the image in question. The number is the pixel size of said image. Simply change 144 to whatever pixel size you would like to use.
• style="float:left" – is a tool I use that helps my return button to hover over the HR or line at the top of my pages. It hovering over the line was a happy accident that came to be when I was trying to make it stay to the left side of the page. I do not fully understand how I made that happen, but it works on my Weebly site. I can't guarantee that this effect will work on any website. So, this is an optional feature that you can remove completely from the code if you so choose. However, if you decide you want to keep it, simply change float:left to float:right to adjust it's position. For more info on alignment see www.3school.com's HTML <img> align attributes or www.3school.com's HTML Images.
  

Note: Make sure you use the full address of the URL in question.

Now let's see some examples of this code!

---

Example #1:

<FORM><onClick="history.go(-1);return true;"><img src="http://www.weebly.com/uploads/1/4/3/9/14399682/9555721_orig.png" alt="Return" border="0" width="161" style="float:left"/></FORM>

Example #2:

<FORM><onClick="history.go(-1);return true;"><img src="http://www.weebly.com/uploads/1/4/3/9/14399682/9555721_orig.png" alt="Return" border="0" width="161" style="float:right"/></FORM>

---

Now all you have to do is add this code wherever you'd like it to appear on your page.

---

Creating a Classical Return Button Code:

Here's the original return code for those of you looking for a classical look. You don't even need to change any part of it if you don't want too. Simply copy and paste it where you want it!

Here's what the code looks like...

---

<FORM>
<INPUT TYPE="button" VALUE="Back" onClick="history.back()">
</FORM>

---

Although it is not necessary to change this code in any way, you might like to change the VALUE, so that it says whatever you'd like it to say instead.

Here are some examples...

---

Example #1:

<FORM>
<INPUT TYPE="button" VALUE="Back" onClick="history.back()">
</FORM>

Example #2:

<FORM>
<INPUT TYPE="button" VALUE="Return" onClick="history.back()">
</FORM>

Example #3:

<FORM>
<INPUT TYPE="button" VALUE="Go Back to the Previous Page" onClick="history.back()">
</FORM>

---

Notice how changing the text between the double quotation marks "" changes what the finished button says? Simply change it to what you would like it to be, or copy and paste on of these examples onto your site!

---

Resources used in this tutorial:

• Computer Hope - Creating a HTML back button
  
• www.3school.com - HTML <img> align attributes
  
• www.3school.com - HTML Images
  

---

Thanks so much for visiting today! Tell me what you thought about the sixth lesson of the series by commenting below or giving this a rating...

Additionally, please let me know if you have any questions or concerns. I will be happy to help in any way I can. Comment below, or visit my Website Shop 101 facebook support group...

Be sure to check out the intro to this series for upcoming lessons or lessons you may have missed!

Wishing you a terrific day. See you again soon for lesson 7, where we'll learn how to add a Custom Google Search Engine onto your website...