Two buttons side by side

Question

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>

Do you need to POST form values, or just link to the pages? – lc. Aug 17 '13 at 13:57 — lc., Aug 17 '13 at 13:57
I need to link to pages – Tyler Rinker Aug 17 '13 at 13:58 — Tyler Rinker, Aug 17 '13 at 13:58

score 9 · Accepted Answer · edited May 23 '17 at 12:33

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.

Could you expand on the style the links to look like buttons? — Tyler Rinker, Aug 17 '13 at 14:00

score 2 · Answer 2 · answered Aug 17 '13 at 13:55

2

buttons would line up side by side automatically since they're display: inline-block by default (I think). I'd remove the float: left since it could be causing some issues when nesting.

You should never nest forms. It'll lead to some really screwy things.

However, if you want two forms side by side you can make them do that by adding display: inline to them. Here's a small demo: http://jsbin.com/UgaMiYu/1/edit

The onclick attribute should't make any difference at all.

answered Aug 17 '13 at 13:55

Bill Criswell

32,161
7
75
66

Thanks Bill I'm a newb. I was more after the look of the button with hyperlink functionality. – Tyler Rinker Aug 17 '13 at 13:59
Got it! Glad you got it sorted out. – Bill Criswell Aug 17 '13 at 14:01

Kiran · Answer 3 · 2013-08-17T14:08:52.143

I just tried to add css to attempt 2. how about this:

HTML:

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

CSS:

form{
    float:left;
}

DEMO: http://jsfiddle.net/uzDZN/

NOTE: Add class to form which has this buttons. Otherwise css may effect other form elements in website.

score 0 · Answer 4 · answered Oct 10 '16 at 23:21

0

Utilizing regular buttons and setting their display property to either inline or inline-block worked for me.

answered Oct 10 '16 at 23:21

Darwin Airola

919
8
11

Two buttons side by side

4 Answers4