Create a "go back" button. How to make a back button on a web page Step back button

In this video tutorial we will look at 3 options for how to make a BACK button to move around the site to previous pages in reverse order. The BACK button is also necessary when links from several pages of the site (A1, A2...An) lead to the same page (B), and from this page (B) you need to return to the previous page (An) of the site from which you got to page (B).

Watch the new video tutorial:

In this video tutorial we will make a button to go back to previous pages of the site in Adobe program Muse. This button will return along the same path that we followed on the site.

In order to make this lesson, I prepared a small project, or rather it cannot be called small, here it consists of top-level pages, first-level pages, and also for the “page-2” page there are several more child pages. And for variety, I created two templates. I applied the first template to the first three pages. And I applied the second template to everyone else.

Let's start. We will create a Back button in “Template C” so that it immediately appears on those pages to which this template is applied. I go to edit this template, and this is where we will insert our back button.

We can insert a “Back” button in three ways. I have special file, which I had already prepared in a notepad. And there are three ways, three codes, using which we can insert such a button on the site.

The first option is just text. The button will be in the form of text. I copy this code:

And I paste it into the template. It looks like this. We just have text and it is highlighted in white. I'll post it here. In order to understand how this all works, we press the ctrl+alt+E keys to view the entire site with all its pages in the browser. This is what the main page of the site looks like. We can surf the menu, select pages. Here we have drop down menus. And, for example, from the main page we immediately went to page “page-3”. And here we have a back button.

This button is active, but when you hover the mouse over it, a hand with a finger does not appear. We can safely click on this button, and we will be redirected back to the main page. In the same way, we can click on page “page-3”, then go to page “page-4” and click on the “Back” button, it will take us to page “page-3”, and if we click on the “Back” button again ", then it takes us to the main page. This is how the back button works.

But this button can hardly be called a button, since it is just this inscription, highlighted in white. If we want to edit it in Muse, we can only change the text size, for example, I'll put "36" here so you can see it better. In my opinion, we cannot change the color of the text. Now I'll try to put red. I chose red, but this did not affect our lettering in any way, so we cannot change the color. We can change the size. Let's try to make it bold and center it. All we can do is edit like this. If we want to fill this block, for example, make it orange, then our text will still be highlighted in white, and, in principle, it does not look very nice.

Now we will copy it. I press ctrl+C and go to the program, and press ctrl+V to paste it onto the site. It looks like this link. Our link is blue. Now she is not very visible. Let's also make a 36th font to enlarge it and see it closer. Here we have just a blue link. If we now press ctrl+alt+E, we will see that when viewed, it looks like this regular blue link. Let's go over it a couple more times to see, click once, twice, come back. This link has the same appearance as a regular link.

We can apply link styles to it in Adobe Muse. Find link styles in the “Hyperlinks” section, select “Edit link styles”. I already have a prepared version. Now I already have a prepared version. You can see that it has a style applied to it. IN standard condition and when hovering the mouse cursor the color is blue and when the active state is red. You saw it while watching. The second style I created was simply all black states. We can apply this style to this button. For example, I'll select and apply this custom style to this button. And you will see that our inscription has turned black.

Here we can also do a fill, for example, I'll do it with the same orange color. Here you can already edit the text. Let's put it in the middle and make it bold. And, in principle, this option is already more similar to a button. There is no longer such a white highlight, and, in principle, this option is already quite suitable. While browsing (ctrl+alt+E), let's go to page "page-3", to page "page-4" and click again. This button works exactly the same as the first one, only it has more options for editing the design.

And the third option for how we can place a button is that the button will be an image. I copy this code:

I go to Muse and click “Insert”. And this third option we have is a picture. In order for us to have some kind of picture here, we need to download some picture file from the Internet or create it ourselves. We add the picture through the “File” function of the program, select “Add files for transfer”. I have already downloaded a couple of pictures from the Internet. We can choose one. Let's select this one with the back button. Now if we look in the “Resources” section, we have added a button “back2.png” - “Transmit”. We have this file for transfer.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "Back" / > < / a >

That's it, click "OK". We won't see any changes in Muse itself. We will see all changes only when viewing the site in a browser. Let's press ctrl+alt+E again to view the site in the browser and try to surf our pages.

Let's go to the page, for example, "page 2-1", now let's go to page "page-2", now let's go to page "page 3", then to page "page-4". And now, if we press the back button, we will go back sequentially in reverse order to home page site. Click “Back”, move to page “page-3”, to page “page-2”. And here we no longer have a button. If we placed it in a template that was applied to the page “page-2”, then we would also have a “Back” button here. Since we don't have one, we have to navigate to the main page only by clicking on the "Home" button in the menu. Let's go, for example, to page “page 2-2-2”, then go to page “page 2-2-1”, then to pages “page-3” and “page-4”. And now in reverse order: page “page-3”, page “page 2-2-1”, page “page 2-2-2” and to the main page.

Of course, you don’t have to place this button on your website, but use regular arrows in your browser. But if you want such a button to be on your website, then you can make it in these ways... And the link to the article will be under this video. That's all. Dmitry Shapovalov was with you. Like this video, subscribe to the channel, write comments below, and I say goodbye to you until the next video lessons.

Good afternoon, I have a question about how to move the button back and place it next to the next button when placing an order. Now it looks like this for me. https://yadi.sk/i/_ZNvGrvEhqSk3 If you move it down, it stops working. The code is responsible for. ..

There is a solution

Hello, can anyone tell me how to make a back button, for example, in the shopping cart, so that a person can return to the previous page?

Insert a button wherever you want into the template, for example, this

+1

When I press the back button on the browser, all the styles seem to disappear until I refresh the page. The default theme should show as in the screenshot below) Tell me what the problem is

Hello, I made a “Go back” button in the cart, not even a button, but just a link with the code Go back Now when returning back to the cart...

There is a solution

Good afternoon! I encountered the following problem: when adding a product to the cart and pressing the "back" button in the browser, information about the products in the cart (in additional block) is not saved until you refresh the page. Those. go to the site, go...

The site you indicated uses a plugin for the cart. As an option with modifications, you can use sending the addition of goods not to?html=1, but to?html=1&items=1; this will respond with the full contents of the cart.

Good afternoon. At each step during checkout, a “Next” button is indicated. In the “Suprime” topic, I found the button code: