If ever you need to place buttons side-by-side in the same column, this tutorial is for you.

To achieve this button layout, there are two steps. Begin by adding the following CSS to either your child theme’s stylesheet, or at page level by adding it to the Custom CSS field in the page settings window.

.btn-inline .et_pb_button_module_wrapper {
display: inline-block;
margin: 0 5px;
}

.btn-inline {
text-align: center !important;
}

Tip: If you don’t want to center the buttons or you want to right align, simple remove or edit the second piece of CSS (.btn-inline {text-align: center !important;}). The right align, just change the word center to right.

Once you’ve added the CSS all that’s left to do is to add the class name btn-inline to the row  that the buttons are in (Row Module Settings > Advanced tab > CSS Class field).

There is a fantastic and surer easy link to the tutorial this is based on on divi+notes

We used centred inline buttons on the following:

Prentice Solutions

Looking to get your business seen? Then see us.

Web Site Developer Auckland | North Shore | Matakana | Warkworth | Omaha

Pin It on Pinterest

Share This