5/5

How To Create Inline Buttons.

Today I am going to show you how to have two buttons inline within one column. 

To achieve two buttons side by side we are going to use a couple lines of css.

Let’s get started.

To begin we need to add to buttons to a section.

Next we need to open the column options and add some CSS and a class to that column.

[css]inline-btn[/css]
[css]
.inline-btn .elementor-widget-wrap {
    display: flex;
}[/css]

If you done everything correctly this what you should have.

The Elementor way.

You can achieve the same thing with 2 columns just be sure to remove all the padding from both buttons and make sure you set the column gap to No Gap .

Adjust the column width and fill in any padding or margin issues you see.

Addon Alternative

For those that wish to an awesome Addon to do all the heavy lifting Ultimate Addons for Elementor has what you are looking for with a multi-button widget.

Multi-button Video

Thanks for reading.

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Related Articles

How To Turn A Section Into A Carousel

Greeting All, In this tutorial I am going to show you how you can turn a one column section in a carousel slider you can be proud of. Here is what you will be creating. Responsive and functional carousel. There…

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile menu seen on Elementor website. See the image below to see what I am referring to. My working environment Theme: Hello Theme Elementor Version: Pro…

How To Wrap Text In Elementor

Greetings All. This brief tutorial will touch on a subject I was asked about this week concerning a simple way of wrapping text around an image. So after some experimenting and trying multiple methods this is the solution I found…

Leave a Reply

Your email address will not be published. Required fields are marked *

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
Pages
Important
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
Pages
Important
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.