featured image

How To Create An Html Button That Acts Like A Link

Buttons are usually created in html to perform certain operations, most especially when working with a form, you will use a button for events like click events or even submit event. But there is one good thing about a button, and that is, you can also create an html button that acts like a link after creating it in your html. So, in this article, we will discuss the various ways to create an html button that acts as a link.

example 1 on how to make a button that acts like a link

If you have decided to add a button to your html file before, you will notice there are different types of button. these includes submit, disabled, reset and more. In this first example, we are going to use a submit button and a form that has an action attribute, the action attribute will tell what will happen when the button is clicked.

<form method=”get” action=””>

        <button type=”submit”>visit</button>

    </form>

 This is a typical form, the method is not really important in this case, you can delete it and then our html code becomes

<form action=””>

        <button type=”submit”>visit</button>

    </form>

Next, within the action attribute, you can specify the action that will be performed when the button is clicked. In this case, we want to navigate to a different page, here, we are navigating to google home page. Then our code becomes

<form  action=”http://google.com”>

        <button type=”submit”>Visit</button>

    </form>

If you run the code above, you will surely navigate to goggle homepage.

One thing to bear in mind is that, the button we selected has nothing to do with the result, because we used a submit button in this case. This means that even without the submit type, the navigation to a new page should still work like this

   <form action=”http://google.com”>

        <button>Visit </button>

    </form>

example 2 on how to make a button that acts like a link

The other option is to use JavaScript. Don’t be scared even of you have not started using JavaScript, it is more simple than you think. And how can we achieve that? Copy the line of code below in your html and then click the button to navigate to a new page

    <button onclick=”window.location.href= ‘http://google.com'”>Visit</button>

The code above works well in chrome, but if you are using a different browser and it fails to load the page, you can then use the code below instead. So whichever one that works for you

<button onclick=”location.href=’http://goal.com'” type=”button”>

        Visit</button>

How the code above works is that, whenever, the button is clicked, it is going to call the window object and point to a specific url address specified using the href attribute and that way, it will load up the page you which to navigate to

example 3

Well, there seem to be another way to make a button act a link. This time, you need to wrap the button within an anchor tag and the whenever you click the button, it will navigate to that page. And how that works is

<a href=”http://www.google.com” target=”_blank”><button>Visit</button></a>

 This is more simple and straight forward, but whatever may be your choice, then you just choose that one.

Leave a Comment

Your email address will not be published. Required fields are marked *