Making a <Button> That's a Link in HTML

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 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;
}

Or pick one of those many CSS libraries like Bootstrap.

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

JavaScript

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 above example, you can also use <button>. The only difference is that the <button> element allows children.

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 to create an HTML button that acts like a link to an item on the same page?

This is assuming that you are not talking about scrolling down to a regular anchor, and instead you want to scroll to actual HTML elements on the page.

I'm not sure if jQuery counts for you, but if you're using Bootstrap, I imagine it does. If so, you can bind to the "click" event for your button and put some javascript code there to handle the scrolling. Typically you might associate the link/button with the element you want to scroll to using a "data" attribute (e.g. data-scroll="my-element-id").

Without jQuery, you'll have to make a function that contains the code as described, and put in an onclick attribute that references your function, and passes "this" as a parameter to your function, so you can get the reference to the link/button element that called it.

For the code to use to actually scroll to the corresponding element, check out this article:

How to go to a specific element on page?

Quick example without jQuery:

<a class="scrollbutton" data-scroll="#somethingonpage" 
 onchange="scrollto(this);">something on page</a>

<div id="somethingonpage">scrolls to here when you click on the link above</a>

<script type="text/javascript">
    function scrollto(element) {
        // get the element on the page related to the button
        var scrollToId = element.getAttribute("data-scroll");
        var scrollToElement = document.getElementById(scrollToId);
        // make the page scroll down to where you want
        // ...
    }
</script>

With jQuery:

<a class="scrollbutton" data-scroll="#somethingonpage">something on page</a>

<div id="somethingonpage">scrolls to here when you click on the link above</a>

<script type="text/javascript">
    $(".scrollbutton").click(function () {
        // get the element on the page related to the button
        var scrollToId = $(this).data("scroll");
        var scrollToElement = document.getElementById(scrollToId);
        // make the page scroll down to where you want
        // ...
    });
</script>

Note: If you literally want a "button" rather than a "link", you can really use any element and make that clickable, e.g.:

<button class="scrollbutton" data-scroll="#somethingonpage">something on page</button>

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>).

My button that takes to a link does not work

First I am not sure why you chose the formaction attribute as the destination URL to link there.

The button with the formaction attribute should be working inside <form> tag.

The formaction attribute specifies where to send the form-data when a form is submitted.

The formaction attribute is only used for buttons with type="submit".

If you want a button which link to a URL you should make a button inside the <a> tag.

<a href="your URL"> <button class="your class">HTML here</button> </>

Second, it doesn’t make sense you put a class name as a CSS recognizable string.

You should define CSS independently and import that to use. Or you can use style attribute to set inline CSS.

import "index.css"
<button class="myclass">
...

File index.css

button.myclass:hover{
    // Your style
}

How to put a link on a button with bootstrap?

You can call a function on click event of button.

<input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">

<script>
function relocate_home()
{
     location.href = "www.yoursite.com";
} 
</script>

OR
Use this Code

<a href="#link" class="btn btn-info" role="button">Link Button</a>

Add link to button HTML

<a> is the HTML element used for creating links, not <button>, so use an <a> element with an href attribute instead of a <button>.

You can then style it to look at much like a button as you like (although I note that most of the CSS you are applying to your <button> elements is geared at making it look unlike a button. About the only thing you are likely to need to do to it is display: inline-block; text-decoration: none; color: black).

How do I make an html link look like a button?

Apply this class to it

.button {  font: bold 11px Arial;  text-decoration: none;  background-color: #EEEEEE;  color: #333333;  padding: 2px 6px 2px 6px;  border-top: 1px solid #CCCCCC;  border-right: 1px solid #333333;  border-bottom: 1px solid #333333;  border-left: 1px solid #CCCCCC;}

<a href="#" class="button">Example</a>

How to make button look like a link?

button {  background: none!important;  border: none;  padding: 0!important;  /*optional*/  font-family: arial, sans-serif;  /*input has OS specific font-family*/  color: #069;  text-decoration: underline;  cursor: pointer;}

<button> your button that looks like a link</button>

---

Related Topics