How do I create an HTML button that acts like a link?
HTML
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 above example, you can also use <button type="submit">. The only difference is that the <button> element allows children.
You'd intuitively 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.
CSS
If CSS is allowed, simply use an <a> which you style to look like a button using among others the appearance property (it's only not supported in Internet Explorer).
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}<a href="https://google.com" class="button">Go to Google</a>Making a button that's a link in HTML
<a href="#"><button>Link Text</button></a>
You asked for a link that looks like a button, so use a link and a button :-) This will preserve default browser button styling. The button by itself does nothing, but clicking it activates its parent link.
Demo:
<a href="http://stackoverflow.com"><button>Link Text</button></a>How do I create an HTML button that acts like a link?
HTML
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 above example, you can also use <button type="submit">. The only difference is that the <button> element allows children.
You'd intuitively 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.
CSS
If CSS is allowed, simply use an <a> which you style to look like a button using among others the appearance property (it's only not supported in Internet Explorer).
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}<a href="https://google.com" class="button">Go to Google</a>How do you create a button in HTML5 that has a link?
Nest the button in an anchor:
<a href='https://www.google.com'><button>Google</button></a>Creating a Link to Look Like a Button
Just change display: block under .g2b-button to display: inline-block. This is because anchor tags (<a>) are treated different by the browser than button tags (<button>).
Button as a Link
Both are invalid. HTML does not allow links to contain buttons or vice versa.
The error handling routines in browsers are just different for the two cases.
If you want a link that looks like a button then use a link and apply CSS.
Related Topics
How to Select All the Checkboxes in Angular 6
How to Display Dynamic Json Data in HTML Using Angular 6
How to Create an HTML Table With a Fixed/Frozen Left Column and a Scrollable Body
How to Append Querystrings to a Url on Submit of a Form
How to Use CSS to Show on Hover Tool-Tips Using the Same Text Which Is Shortend With Ellipses
Flexbox: Center Horizontally and Vertically
What Are Valid Values For the Id Attribute in Html
Maintain the Aspect Ratio of a Div With Css
How to Embed Pdf File With Responsive Width
Alternative to Iframes With Html5
How to Make Transparent Color White Instead of Black in Html2Canvas
Pressing Spacebar Scrolls Page Down
Align the Radio Buttons on the Center Whatever the Text Length
How to Set Width of Mat-Table Column in Angular