If you are looking to add multiple buttons to your page and have them line up nicely, this article will be a starter for that. Just note that each page is different so this is just a starting point to guide you along. You will need to make other adjustments to the code based on your web page design.
Step 1:
In this example we are adding two buttons to our page. First we need to make sure that we give each button a class in Button Builder. Under the General Tab add a different class name for each button. In this example we have named one left and the other right.
Step 2:
Follow the export process for both buttons and add them to your project workflow.
Step 3:
Now we need to edit the button <body> code we inserted earlier and surround it with a <div class="left"> for the first button and <div class="right"> for the second. It would look something like this.
<!-- Start of the body content for CoffeeCup Button Builder -->
<div class="left">
<div class="buttonContainer left-button">
<a class="buttons buttonRegular" >
<span class="icon_menu_handle"></span>
<span class="text_menu_link"></span>
<span class="secondary_text"></span>
</a>
</div>
<!-- End of the body content for CoffeeCup Button Builder -->
</div> <!-- Start of the body content for CoffeeCup Button Builder -->
<div class="right">
<div class="buttonContainer right-button">
<a class="buttons buttonRegular" >
<span class="icon_menu_handle"></span>
<span class="text_menu_link"></span>
<span class="secondary_text"></span>
</a>
</div>
<!-- End of the body content for CoffeeCup Button Builder -->
</div>Now that we have the HTML Setup we can code the CSS!
Step 4:
To get the buttons next to each other we are going to use a simple float as shown below.
Note: You will need to add this to your CSS file, not the button CSS files.
.left {
float: left;
}
.right{
float: left;
}Step 5:
Adding some space between your buttons so they have room to breath is easy! Lets add some margin to the CSS.
.left {
float: left;
margin-right:10px;
}
.right{
float: left;
margin-left: 10px;
}That is all there is to it. Once you are done your buttons will be sitting next to each other having conversations and your customers will be happy! Here is the outcome:
