Inline buttons are really useful especially when you want your user to either watch a Video or Continue to Signup but this is something not possible in Divi. But Divi Supreme made it possible and not only we made it possible to create Inline buttons we’ve also added many other options(Discussed below) that will really help you when setting up button.

Let’s see how to achieve it.

First, open up Visual Builder and choose a place where you want to put two inline buttons. For today we’ve added the Insurance Agency Home page Layout on our site. So now we’ll need to delete the existing Button Module to add our two Inline buttons.

Now Insert a new Module at that same place as Supreme Button

Now you can start, you’ll have to set up your button Text and Link. When you’ll enter any text, only then that button will become active. So, first of all, you’ll have to enter your text in the Button Text Fields.

Now Setup the links for the buttons which are very important under the Link tab. You’ll see two tabs Button #1 and Button#2 and it’s very straight forward just go into the first tab(Button #1) to enter a link for the Button #1 and same goes for the Button #2.

Now It’s time to add some design changes to the buttons under the Design Options. You’ll see two panels for it (Button One and Button Two) and there you can easily design your buttons the same way you design other Divi buttons.

We’ve made these changes to both buttons:

• Button Text Color: #0c71c3
• Button Background Color: #fff
• Button Border width: 0px
• Button Border Radius: 3px
• Button Font: Montserrat
• Button Padding: 8px 8px 30px 30px

And there we go, now we’ve two Inline buttons and it was so easy to make them.

Alright so Let’s see how to get creative with those buttons, you have so many other options available for Supreme Button Module. Some of them are:

• Tooltip
• Video Overlay
• Image Overlay
• Click to Phone call
• Separator text
• And more…

Add a Tooltip on Hover

Ok let’s see how to add tooltip to the button, for this go to Content Options > Link and you’ll see there a Tooltip option just enable it you’ll see other settings pops up.

• Tooltip Content: Here you should enter any text you want to show to the user when they hover on the button.
• Show Arrow: If you want a small arrow for the tooltip then have it enabled.
• Size: Here you can change the size of the Tooltip.
• Placement: This is where you can change the placement of the tooltip to Top, Bottom, Left or Right side of the Button.
• Animations: Change the Animation of the Tooltip when it appears, it can be a Fade animation or Fade in Direction which detects the placement of the tooltip and then comes out from that direction.

Live Demo

Adding Image Overlay on button click

So now we’re gonna add an Image overlay, which means when a user will click on the button an Image will be shown as an overlay.

For this, enable the use of Image Overlay under the Link tab and add your desired image in the image box.

Here’s what we just created

Live Demo

Adding Video Overlay on Button Click

To add a video overlay, Enable the use of Video Overlay and make sure that you’ve entered the URL of the Video in the Button URL Field

And that’s it again, It’s that easy. You’ve just created a video overlay. Hers’s a quick look

Live Demo

Other Options

There are so many other Options in Link tab such as Phone call, SMS, Messenger, Skype and many others you can also use them for your users to chat or contact with you on Phone or Facebook Messenger or any other that you chose. Make sure to use them as well on your site.

Do you like to add Hover Animation?

You can also add some really cool Hover Animations to both buttons easily, for this go to Animation Panel and choose any animation for the Button 1 and Button 2, It’s that easy and small example below

 Live Demo

How about adding Hover animation to Icons?

Adding Animation to Icons isn’t possible in Divi’s standard Button Module but Divi Supreme’s Button Module made it possible, you just have to make sure that you have the Icon set in the Button Design settings and then you can head over to Animation Panel and you’ll see an option to set the animation for both buttons Icons

Live Demo