Tyler Rinker Tyler Rinker - 1 month ago 15
CSS Question

Two buttons side by side

I am trying to make two hyperlinked buttons go side by side. I saw this question but can not make the answers work. Below are my two attempts to make the buttons go side by side. The first attempt works but hyperlinks to the wrong location. The second one hyperlinks correctly but is not side by side. The third based on this question doesn't link anywhere but I think that has to do with using links instead of

Javascript:submitRequests()
.

<!DOCTYPE html>
<html>
<body>

<head>
<style>
.container {
overflow: hidden;
}

button {
float: left;
}

button:first-child {
margin-right: 5px;
}
</style>
</head>

<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>

Attempt 1
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
</form>

Attempt 2
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form><form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>

Attempt 3
<div class="container">
<button onclick="http://trinker.github.io/qdap_dev/paste2.html">paste2</button>
<button onclick="http://trinker.github.io/qdap_dev/colSplit.html">colSplit</button> text
</div>

</body>
</html>

lc. lc.
Answer

If you just need plain links to work, just use links and style them to look like buttons (see also Styling an anchor tag to look like a submit button):

<style>
    .button {
        appearance: button;
        -moz-appearance: button;
        -webkit-appearance: button;
        text-decoration: none; 
        font: menu; 
        color: ButtonText;
        display: inline-block; 
        padding: 2px 8px;
    }
</style>

<div class="container">
    <a href="http://trinker.github.io/qdap_dev/paste2.html" class="button">paste2</a>
    <a href="http://trinker.github.io/qdap_dev/colSplit.html" class="button">colSplit</a> text
</div>

You could also do <a href="..."><button>paste2</button></a> but this is not actually legal HTML5. FWIW, Firefox does seem to render it correctly though.

Comments