How to put two buttons on each other

Asked

Viewed 14,733 times

2

I don’t know as much about HTML and CSS as I would like and I need to make a small change to a site where I’m very limited, so I did it here.

<div>
    <div>
        <a class="button" href="(LINK)" style="float: right; border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Abra sua conta</a></div>
    <div>
        <a class="button" href="(LINK)" style="float: center; border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Minha conta</a></div>
</div>
<p>

The buttons are ok only that one is superimposed on the other, and I need you to stand next to each other. Someone can help me with a solution to this?

html css button inline

3 answers

1

The ideal is to continue using div’s. Take the styles float of the buttons and add a style to your div’s.

.floatLeft{float:left};
<div>
    <div>
        <a class="button floatLeft" href="(LINK)" style="border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Abra sua conta</a></div>
    <div>
        <a class="button floatLeft" href="(LINK)" style="border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Minha conta</a></div>
</div>

  • Thanks, solved. =)

  • Tag as answer! This way it will help other people who have the same question.

1

Young first Float:center there is no! We only have the Float:left and Float:right Documentation on the Float in the CSS

But my answer uses neither (remove the floats). To solve your problem just put display:inline-block in div

div > div {
    display: inline-block;
}
<div>
    <div>
        <a class="button" href="(LINK)" style=" border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Abra sua conta</a>
    </div>
    <div>
        <a class="button" href="(LINK)" style=" border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Minha conta</a>
    </div>
</div>

  • Thanks, for what I realized there is more than one way to solve this. I ended up using this solution because it is simpler. Thanks.

  • Ok Bruno, I like this solution with float:left vc can have problems with other elements on the page. If you have chosen my answer just mark it as accepted in this icon ✔ down the arrows of my answer. Avoid leaving questions that have already been solved as open on the site. Good luck with the project!

  • Thanks brother, didn’t know I needed to mark the arrow... hehe... as I "close" the question??

  • @Brunosilva actually you can only accept ✔ an answer. So it would be nice if you always signaled the answer that you actually used in the end. When you accept the answer the site already leaves it as "solved" it prevents it from going back to the "Unanswered Questions" queue so it is good to Signal (close) the Question by accepting an answer ✔ when it has already been resolved. It’s a bit confusing, but I think I can understand it.

0


Put this inside a table should work:

<div>
    <table>
        <tr>
        <td>
            <div>
                <a class="button" href="(LINK)" style="float: right; border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Abra sua conta</a>
            </div>
        </td>
        <td>
            <div>
                <a class="button" href="(LINK)" style="float: center; border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Minha conta</a>
            </div>
        </td>       
        </tr>
    </table>
</div>

  • Thanks for the help.

Browser other questions tagged html css button inline

You are not signed in. Login or sign up in order to post.