How to create an HTML button that acts like a link

0 votes

I would like to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible.

I would also like it so there aren't any extra characters, or parameters in the URL.

How can I achieve this? Have shared my code below:-

<form method="get" action="/page2"> 
        <button type="submit">Continue</button>
</form>

but the problem with this is that in Safari and Internet Explorer, it adds a question mark character to the end of the URL. I need to find a solution that doesn't add any characters to the end of the URL. There are two other solutions to do this: Using JavaScript or styling a link to look like a button.

Using JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

Feb 17 in Others by Soham
• 8,730 points
28 views

1 answer to this question.

0 votes

To answer your doubt, the plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute.
 

<form action="https://google.com"> 
            <input type="submit" value="Go to Google" /> 
</form>

If necessary, set CSS display: inline; on the form to keep it in the flow with the surrounding text. Instead of <input type="submit"> in the above example, you can also use <button type="submit">. The only difference is that the <button> element allows children.

You will then expect to be able to use <button href="https://google.com"> analogous with the <a> element, but unfortunately no, this attribute does not exist according to HTML specification. If CSS is allowed, simply use an <a> which you style to look like a button using among others the appearance property

<a href="https://google.com" class="button">Go to Google</a>

a.button { 
-webkit-appearance: button; 
-moz-appearance: button; 
appearance: button; 
text-decoration: none; 
color: initial; 

}

If JavaScript is allowed, set the window.location.href.

<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

Instead of <input type="button"> in the above example, you can also use <button>. The only difference is that the <button> element allows children.

answered Feb 17 by Aditya
• 7,280 points

Related Questions In Others

0 votes
1 answer

How to create an Icon Button in Flutter?

Hi@akhtar, To create an Icon Button in Flutter, ...READ MORE

answered Jul 24, 2020 in Others by MD
• 95,340 points
318 views
0 votes
2 answers

How to create a floating button in Flutter?

Scaffold widget provides floatingActionButton property. You can ...READ MORE

answered Nov 9, 2020 in Others by Vijay
• 200 points
3,473 views
0 votes
1 answer

How to create an Alert Button in Flutter?

Hi@akhtar, You can do this with the help ...READ MORE

answered Sep 3, 2020 in Others by MD
• 95,340 points
218 views
0 votes
0 answers

how to list the contents of a asset into an event

May 29, 2019 in Others by anonymous
177 views
0 votes
1 answer

Seo - Importance of href value in anchor tags?

use method 1 you have thats a ...READ MORE

answered Feb 20 in Others by narikkadan
• 7,860 points
80 views
0 votes
1 answer

HTML5 pushstate and SEO link

self.name= window.location.pathname; window.location.replace("."); Script for pushstate and hashbang fallback: if(self.name){ ...READ MORE

answered Feb 20 in Others by narikkadan
• 7,860 points
15 views
0 votes
0 answers

Are links without anchor text bad for seo?

We where redesigning our website and we ...READ MORE

Mar 12 in Digital Marketing by Kichu
• 17,220 points
41 views
0 votes
1 answer

How blockchain hides it's HTML source?

When you click View Source, you see ...READ MORE

answered Jul 17, 2018 in Blockchain by Shashank
• 10,400 points
465 views
0 votes
1 answer

How to style a checkbox using CSS

In modern browsers which include Internet Explorer ...READ MORE

answered Feb 17 in Others by Aditya
• 7,280 points
32 views
0 votes
1 answer

How to get Bitmap from an Uri?

Try using the following lines of code ...READ MORE

answered Feb 18 in Others by Aditya
• 7,280 points
66 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP