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, 2022 in Others by Soham
• 9,700 points
3,122 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, 2022 by Aditya
• 7,680 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,440 points
743 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
4,679 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,440 points
563 views
0 votes
1 answer

How can I add a wildcard to my if formula (that also contains an or condition)

3 Try: The formula in B1: =IF(SUM(COUNTIF(A1,{"* IDE","* IDE-?"})),"Y","N") Or, a little ...READ MORE

answered Feb 2, 2023 in Others by narikkadan
• 63,420 points
317 views
0 votes
0 answers

How do I create an HTML button that acts like a link?

How can I make a button in ...READ MORE

Jul 8, 2022 in HTML by Tejashwini
• 3,820 points
247 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, 2022 in Others by narikkadan
• 63,420 points
394 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, 2022 in Others by narikkadan
• 63,420 points
753 views
0 votes
0 answers

Are links without anchor text bad for seo?

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

Mar 12, 2022 in Digital Marketing by Kichu
• 19,050 points
344 views
0 votes
1 answer

How to style a checkbox using CSS

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

answered Feb 17, 2022 in Others by Aditya
• 7,680 points
656 views
0 votes
1 answer

How to get Bitmap from an Uri?

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

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