How can I place multiple html buttons that act as links on the same page?

Question

Does any one know how I can place multiple html buttons that act as links on the same html page?

I am currently doing this:

<form action="http://justchillinc.wix.com/just-chill">       
    <input type="submit" value="Just Chill">
</form>
<form action="http://google.com">
    <input type="submit" value="Google">
</form>

Err… like that. Although you should use links if you want links and CSS if you want them to *look* like buttons. — Quentin, Jan 11 '15 at 14:42
Duplicate of http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link?rq=1 — GolezTrol, Jan 11 '15 at 14:44
just make `a` tag and then style is through css by either targeting the `a` directly or assign a `class` or `id` to it then style that. — ctf0, Jan 11 '15 at 16:06

score 1 · Answer 1 · answered Jan 11 '15 at 14:56

not styled brilliant but you get the idea... any a tag with a class of button will be styled the same.

.button{
  display:inline-block;
  text-decoration:none;
  color:yellow;
  font-weight:bold;
  min-width:132px;
  min-height:37px;
  border:1px solid black;
  border-radius:12px;
  text-align:center;
  background-color:gray;
  box-shadow:8px 8px 8px gray;
  margin:10px;
  
  }
.button:active{
  background-color:green;
position:relative;
  top:8px;
  left:8px;

}

<a href="http://google.com" class="button" target="_blank">Link Here</a>
<a href="http://google.com" class="button" target="_blank">Link Here</a>
<a href="http://google.com" class="button" target="_blank">Link Here</a>
<a href="http://google.com" class="button" target="_blank">Link Here</a>

Max Klein · Answer 2 · 2015-01-11T16:03:38.033

The way you do it is already good. Here are some other methods to do this:

With the a tag and some custom css (http://jsfiddle.net/pp4eufat/)

HTML:
```
<a class="button" href="http://justchillinc.wix.com/just-chill">Just chill</a>
```
CSS:
```
a.button {
    padding: 5px 10px;
    background-color: #ddd;
    color: #222;
    text-decoration: none;
}
```
You can easily assign the button class to submit buttons or similar to get a consistent button look all over your page.
With a button and javascript (http://jsfiddle.net/gdfx5fd3/)

Code:
```
<button onclick="window.location.href='http://google.com';">Google</button>
```
The important part is onclick="location.href='http://google.com';". It tells the browser to open http://google.com when the user clicks the button. The disadvantage is that the user has to have javascript enabled (nearly everybody has it enabled, so this isn't a big problem)

score 0 · Answer 3 · answered Mar 23 '17 at 08:44

From:

<form action="http://justchillinc.wix.com/just-chill">       
    <input type="submit" value="Just Chill">
</form>
<form action="http://google.com">
    <input type="submit" value="Google">
</form>

To:

<form method="post" action="http://justchillinc.wix.com/just-chill">       
    <input type="submit" value="Just Chill">
</form>
<form method="post" action="http://google.com">
    <input type="submit" value="Google">
</form>

score 0 · Answer 4 · answered Sep 04 '17 at 05:51

This is a way to create multiple links if you didn't want to copy and paste the same link.

<button class= "card" id="card-1">1</button>
<button class= "card" id="card-2">2</button>
<button class= "card" id="card-3">3</button>
<button class= "card" id="card-4">4</button>
<button class= "card" id="card-5">5</button>
<button class= "card" id="card-6">6</button>
<button class= "card" id="card-7">7</button>
<button class= "card" id="card-8">8</button>
<button class= "card" id="card-">9</button>


<script type="text/javascript">
    var elements = document.getElementsByClassName("card");
    for (i = 0; i < elements.length; i ++)
    {
        (function(){
        elements[i].onclick = function () {
        location.href = "https://stackoverflow.com/questions/27888246/how-can-i-place-multiple-html-buttons-that-act-as-links-on-the-same-page#";
        };}());
    };
</script>

How can I place multiple html buttons that act as links on the same page?

4 Answers4