Linking pages using buttons click event

Hyper Linking buttons in webpage Hyper links are used to link different pages within a site and outside a site to each other. Same thing can be achieved by using a button. We can use a button to link different pages. We will connect the url of the new page to the onclick event of the button. We can do this by using a form and a submit button but there is no point in using a form for a hyper linking of pages. So here are some examples of using buttons to link different pages.
HTML button with onClick event with location to link between web pages using address or URLs

Video tutorial on Text links in Part I
<input type=button onClick="parent.location='index.html'"
 value='click here'>

Another way of linking button

<input type=button onClick="location.href='index.html'"
 value='click here'>

Demo of two types of buttons with code



<input type=button onClick="location.href='../'"
 value='click here to visit home page'>



<input type=button onClick="
parent.location='https://www.plus2net.com/'" 
value='click here to visit home page'>

Using hyper link

<a href=../><input type=button value='HOME'></a>
Some time from SEO angle linking using a button is not a good idea as we loose the anchored text advantage of hyper linking. Read the article on search engine friendly page design to know more on this.

Opening in a new window

To open the target page in a new window ( new Tab ) we have to use onClick=parent.open()
<input type=button onClick="parent.open('https://www.plus2net.com/')" 
value='click here to visit home page' >

Managing from a child window

We can open a child window of different height and width by using JavaScript window.open command. We can pass any variable to child window and receive data from child window to main window.

Read More on Child window control in our JavaScript section.

We can display buttons in Child window and manage the main ( parent ) window by using buttons. We can make the main window navigate to different page from the child window.

Check this demo on using buttons to manage main window.


To display above button , source is here
<input type=button onClick=window.open("button-child.php","demo","width=550,height=300,left=150,top=200,toolbar=0,status=0,"); value="Open child Window">
Source code of the buttons used in Child window is here
<input type=button onClick="opener.location='https://www.plus2net.com/'" value='Make the Main window change'>
<input type=button onClick="opener.location='https://www.plus2net.com/html_tutorial/button-linking.php'" value='Bring the button linking tutorial again'>
<input type=button onClick="location='https://www.plus2net.com/'" value='Make the current  window change'>
<input type=button onClick="self.close();" value="Close this window">

Button with Style

We can create attractive buttons by using style property. We can manage shape, size, font , background colour, shadow, hover and many other properties of the button.
DEMO of Buttons with CSS properties

Using bootstrap style

Bootstrap is opensource front end framework to manage look and feel of your website.
We can add attractive buttons using bootstrap classes.



We can change size of these buttons
Read more attractive buttons using bootstrap in JQuery section.

Using image to link

Click this logo ( image ) to visit home page

<a href="../"><img src=../images/top2.jpg></a>

target=new

We can open the page in a new tab by using target=new. This can be used in text links and buttons also.
<a href="../"  target=new><img src=../images/top2.jpg></a>
HTML
Hyper-linking Submitting a form using Image as button
HTML Form

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    rozel rosauro

    22-03-2012

    it is very helpful to me ...thanks
    N G Sundar

    14-05-2012

    Exactly what I wanted. Did not want to submit the form; instead wanted to go to another page.
    rozel rosauro

    05-06-2012

    it is very helpful to me ...thanks
    chavda bhavna

    07-08-2012

    nice understanding exampels.good.thanks.
    DekeR

    19-09-2012

    very helpfull - just ask google, and dont need read API or something like that, THX
    harini

    26-12-2012

    Amazing article.. thanks for the help.
    sanju

    07-01-2013

    how i can open a folder from pc by clicking button and change photo by selecting any photo
    venkat

    15-03-2013

    very useful ....
    Vengefull

    16-07-2013

    Good article, very helpfull. Thank you.
    anis

    19-04-2014

    what is the different between location and parent.location
    lyn

    27-05-2014

    Its really helpful :,) tq so much
    wiki

    10-07-2014

    Thanks you sooo much,,, this is what i'm looking for...
    makbul

    28-09-2014

    i want to generate click evant on a .cs with use of html button
    JohnC

    09-10-2014

    Thank you all. This has enabled me to get our local site running. Do you have a book available for purchase or download? Once more thank you so very much.
    rasool

    30-04-2015

    Tnx A Lotttttt !

    Best Site Ever :)
    Ken

    09-06-2015

    Thank you so much!!!
    Ishman

    08-10-2015

    How do i pass parameter while redirecting to other page using onClick function
    KyleInMC

    16-10-2015

    Um... the open.window onClick thing doesn't work in the Google Sites editor. It says "Missing or malformed url parameter" what do I do?
    Bramhananda reddy

    28-02-2016

    Apart from other stuff Your Explanation in practical is really very nice.Keep it up and wish u all the best
    Hasini Silva

    03-07-2016

    This is amazing. Thanks a lot!
    manik

    03-11-2017

    thanks for this
    i had been looking for this from a long time and found it here
    ibexy

    20-05-2018

    can this be used with image links?
    smo1234

    10-08-2018

    To take the parameter to different page or different site , you can use query string.
    smo1234

    10-08-2018

    One image ( plus2net logo ) is added as a link to home page.

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer