Inline Divi buttons (side-by-side) & Free layout

Buttons are an essential part of any website and sometimes a single button just isn’t enough, so this tutorial will show you how to add multiple Divi buttons so they sit inline next to each other. This post will show you step-by-step on how to use the Divi Builder to create double-buttons, treble-buttons, and 2 buttons with a joining text bar.  You can download the free Divi layout JSON for this tutorial at the bottom of the page.

We will not be using the Divi Button modules for this but will instead make use of the Divi Text module.

Inline buttons preview

2 Divi buttons side by side using the text module

Each of our buttons will be created with a text module which is styled to look and act like a regular button. The Text module allows us to control all of the same options as the Button module with the exception of the icon hover option. By using a Text module we can add the inline CSS within the module and also have greater control of the button text, such as adding a 2nd line.

Create our inline buttons using Text modules

1. Add a new section with 2 columns and add a text module into the 1st column
2. Add your button text “click me” into the Text Content area
3. Add your button link into the module Content settings under Text Settings > Content > Link > Module Link URL
4. Add your background color for the button under Text Settings > Content > Background > Background. Click on the gradient background and change the colors to #17b4b7 and #34aa99
5. Duplicate your button so you have 2 sitting under each other in the same column
   

Align our buttons inline with CSS

To make our buttons site next to each other on 1 line we will need to use some custom CSS within each of the buttons text modules Advanced settings.

1. 1. Go to your buttons Text Settings > Advanced > Custom CSS and add the following CSS code;

      display:inline-block;

Adding padding and customizing our fonts

Now we have our 2 buttons sitting side-by-side on 1 line we need to style them to look and act like buttons using the settings within the Text module. You can style the text module just as you would in the Button module so there are unlimited options available. Now we are going to style the buttons by adding padding and styling the button text using the module settings.

1. Go to Text Settings > Design > Spacing > Padding and add 20px top & bottom padding and 25px left & right padding.
2. Go to Text Settings > Design > Text > Text Text Color and set to #ffffff (white) and set Text Font Stye to uppercase (TT)
3. You can style font settings on hover as required.

Add rounded corners using CSS

Adding rounded corners to your buttons is an option within the module settings but this seems to cause alignment issues when we are working with modules set to display inline-block. To keep our buttons aligned as they should we can add a simple line of CSS into the module.

1. For your left button Go to Text Settings > Advanced > Custom CSS and add the following line of code to round the left corners.

   border-radius:35px 0px 0px 35px;

2. For your right button Go to Text Settings > Advanced > Custom CSS and add the following line of code to round the right corners.

   border-radius:0px 35px 35px 0px; 

Add the button hover effect using box-shadow settings

By using the box-shadow option to add the hover effect on our buttons we get to use the inbuilt animation effect. The downside of using the box shadow for the hover effect is that you can’t then have any other box-shadow effects. If you prefer to use the box-shadow settings for an outer shadow you can just use the background hover settings to create the hover mode for the button.

We will add a box-shadow on the hover state which covers the entire button from the left or right depending which button we are working on. For a double button, we will animate the box-shadow to the left on the left button and to the right on the right button.

1. Go to Text Settings > Design > Box Shadow and click on the bottom-right preset box-shadow.
2. With the default options showing set all of the options to 0 so there is no shadow
3. Click on the hover icon for Box Shadow Horizontal Position and click the Hover tab and set the value to 130px for the right-side button and -130px for the left-side button.

Make your inline buttons look great for mobile and tablets

To stop the buttons stacking underneath each other you can set the max-width to 50% for 2 buttons and 33% for 3 buttons and so on.

For most cases, it looks better for your buttons on mobile to take up the full width. So for 2 buttons you would set the mobile width to 50% each and for 3 buttons to 33% and so on.

If you have 3 buttons in a 1/3 column then there is not too much room for the buttons to sit together and text-wrapping may occur. You can play with your own settings such as reducing text sizes or left & right padding to make your buttons fit correctly.

1. Go to Text Settings > Design > Sizing > Max Width and set the width to 50% (33% if 3 buttons)
2. Go to Text Settings > Design > Sizing > Width and click on the mobile icon and then the Mobile tab. Set the width to 50% (33% if 3 buttons)
3. Go to Text Settings > Design > Sizing > Max-Width and click on the mobile icon and then the Mobile tab. Set the width to 50% (33% if 3 buttons)

You have an inline Divi double-button!

Your button should now look like the top button in the demo at the top of the page. You can control the styling of any part of the button using the inbuilt Text module options as you would with a button module so

Create a triple Divi button using 3 text modules

If you want to have a triple Divi button you can duplicate one of the buttons you just created and edit a few of the settings so it fits into the line. For this demo, we will also make the buttons slimmer.

1. Using the double button from above as the base, duplicate your left button.
2. Go to Text Settings > Advanced > Custom CSS and remove the following line of code to round the left corners.

   border-radius:35px 0px 0px 35px;

3. Go to Text Settings > Design > Box Shadow and click on the reset icon to remove all box-shadow settings
4. Go to Text Settings > Content > Background and set the background color gradient to #437fd8 and #3c85c1
5. Click on the hover icon to add a hover gradient background color of #1a4777 and #286e82. (This should be a color similar to that created by the box-shadow effects on the left and right buttons)
6. Go to Text Settings > Design > Spacing > Padding and edit to 10px top & bottom padding and 20px left & right padding.
7. Go to Text Settings > Design > Sizing > Width and click on the mobile icon and then the Mobile tab. Set the width to 33%
8. Go to Text Settings > Design > Sizing > Max-Width and click on the mobile icon and then the Mobile tab. Set the width to 33%

If you want to connect your left and right buttons with a standard text as in the 3rd example all you need to do is;

1. Remove the middle buttons link
2. Set a new background-color of #f4f4f4
3. Remove all hover effects (box-shadow)

 You have an inline Divi treble-button or joined double-button

Download the Divi inline buttons layout JSON

For those of you who got lost in the tutorial or just want to have these awesome buttons on your site right away, you can download the Divi layout JSON file below. Help spread the word and do your bit to keep Divi Theme Examples a forever free resource for the community by sharing using the social media icons below.

The download contains the Divi double button, the treble button and the double linked buttons from the tutorial above plus a double button with 2 lines of text.

[sociallocker id=”225940″]
Sharing is caring 🙂 Download your button layout here
[/sociallocker]

Tips for inline-buttons workflow

1. Once you set your Text modules to display inline-block it can be hard to click on the setting icon for some modules so you may need to use the wireframe view mode in the visual builder.
2. With so many settings to edit, it is easy to spend a lot of time chopping and changing settings. Use the right-click extend styles function to extend styles to the other button/s in your column and preview them all with uniform styles much faster. Right-click on the headings for specific settings you want to extend and select where they extend to.