Generic selectors
Exact matches only
Search in title
Search in content
Filter by Categories
Advanced Scripts
Amazon SES
Amazon Web Services
BasePress
Blocksy Theme
Brand Building
Bricks Builder
BunnyShell
Cloudflare
CSS
Digital Marketing
Elementor
Email Marketing
Entrepreneurship
Fluent CRM
Fluent Forms
Fluent SMTP
GoDaddy
Google Fonts
HTML
Hydrogen Pack
JavaScript
Jetpack
Kadence Theme
LiveCanvas
Meta Box
Online Business
Oxygen Builder
OxyMade
PHP
Piotnet Forms
Pods
SaaS
Scripts Organizer
Search Engine Optimization
Social Media Marketing
Swiss Knife
Web Design
Web Development
Web Strategy
WordPress
Work From Home
Zion Builder

3 Step Method to Create Buttons with Icons in Oxygen

Written by:
Mohammed Wasim Akram
First Published on:
October 21, 2020
Last Updated on:
June 20, 2021
Post Categories:
✼ Disclaimer: SyncWin is user-supported therefore this page may contain our affiliate links and if you purchase something using those links, we may get some commission without any additional cost to you. Click to Learn More.

Please note we want to keep things crystal clear that this page may contain some of our affiliate links. Also, we don't know, use or recommend every product we link to, so please do your due diligence before making your buying decision.

However, there are very few selected products that we trust, use, and recommend to our readers and community, and we always mention that on our website which you could also find on our dedicated Recommendation Page.

Hence, if you make a purchase using any of those links, then it is safe to assume that we might get a small amount of commission without any additional cost to you, which helps and encourages us to produce more helpful content like this for you.

Feel free to explore our Legal Policy Pages.

How to create a button with an icon in Oxygen? I have seen new users ask this question every now and then in Oxygen Group. So I decided to share my method of creating icon buttons in Oxygen which I think is the easiest.

There are multiple ways to create buttons with icons in Oxygen but in this tutorial, I am going to teach you the most simple 3 step process of doing this using the least possible Oxygen elements to keep it super simple.

You can get an idea of what we are going to create in this tutorial just by looking at the attached screenshot below.

Beautiful Buttons with Icons in Oxygen - Image - SyncWin

So let's dive in...

Step #1 Add a Link Wrapper Element

The very first step is to add a Link Wrapper element using the +Add Button in the Oxygen editor window to the section where you want to add the button, then make the Flex Direction to a "Row" from the Layout settings under the Advanced tab or simply select "Stack Child Horizontally" from the Primary tab.

Now add a "Background Color" from the Background Settings under the Advanced tab and some padding around the link wrapper. Here in this example, I will use the Red color and Padding all 10px top, 10px bottom, 20px left, and 20px right for the demo purpose.

If you want you also can add some "Border Radius" from the Borders settings under the Advanced tab to make the corners a little curve using 5px or whatever you like, but if you want totally round corners then consider using 50px.

Also, you can add some "Box Shadow" from the Effects settings under the Advanced tab to make it look beautiful. For example, I would use Black with 25% opacity as the Shadow Color, 10px for Shadow Horizontal Offset, 10px for Shadow Vertical Offset, 50px for Shadow Blur, and 10px for Shadow Spread.

The last thing you can add is a different background color on hover by changing the State to Hover then simply add a different "Background Color" from the Background settings under the Advanced tab. For this example, I am going to use Black.

The Navigation Should Look Like This:

> Add a Link Wrapper element using the +Add Button
> Make the Flex Direction to a "Row" from the Layout settings under the Advanced tab
> Add a "Background Color" from the Background Settings under the Advanced tab
> Add some padding around the link wrapper from the Size & Spacing settings under the Advanced tab
> Add some "Border Radius" from the Borders settings under the Advanced tab
> Add some "Box Shadow" from the Effects settings under the Advanced tab
> Change the State to Hover then add a different "Background Color" for hover from the Background settings under the Advanced tab

Step #2 Add an Icon Element

Now in this step, you need to add an Icon element using the +Add Button in the Oxygen editor window and put it under the link wrapper that we have learned to set up in the above section.

Select the icon you like among the bunch of available icons from under the Primary tab and then the Icon option in the properties panel. For this example, I would use check-square-o.

Now adjust the size of the icon from the Icon Size option under the Primary tab, then change the color of the icon and add some padding around it. For this example, I would use 25px as icon size, White for icon color, and 5px for all padding.

The Navigation Should Look Like This:

> Add an Icon element using the +Add Button under the link wrapper
> Select the icon you like from under the Primary tab and then the Icon option
> Adjust the size of the icon from the Icon Size option under the Primary tab
> Change the color of the icon

> Add some padding around it from the Size & Spacing settings under the Advanced tab

Step #3 Add a Text Element

This is the final step, now you need to add the Text element just under the link wrapper using the +Add Button in the Oxygen editor window.

After that, adjust the Font Size from the Typography settings under the Advanced tab to match it with the icon size, set the Font Weight, Text Transform, and the Font Color as per your choice.

In this example, I would use 20px for the font size, 600 for the font-weight, uppercase for text-transform, and white as the font color.

Also, must add Padding around the text element from the Size & Spacing settings under the Advanced tab. For this example, I am using 5px for all padding.

Congratulations you have got a button!

The Navigation Should Look Like This:

> Add the Text element just under the link wrapper using the +Add Button
> Adjust the Font Size from the Typography settings under the Advanced tab
> Set the Font Weight, Text Transform, and the Font Color
> Add Padding around the text element from the Size & Spacing settings under the Advanced tab

Conclusion

In this post, I have shared the step-by-step easiest process of creating beautiful buttons with icons using the minimum amount of Oxygen elements to keep it as lite as possible.

I believe this tutorial was helpful for you and if you think I am right then consider sharing this post with your friends and community.

Also if you have to say something then feel free to leave a comment below to add some extra value for the other readers.

Hopefully, now you know that how to create buttons with icons in Oxygen, so next if you also want to learn how to create a beautiful icon list in Oxygen, then check out my other tutorial by clicking on the hyperlink.

Thanks a lot for spending your precious time on our website syncwin.com.

Become an Insider to Syncronize with Web-Success.

email Newsletter
Facebook Group
Subscribe to our newsletter to get insider wisdoms.
Join our community to connect with likeminded folks.
Join FB Group

Related Resource Posts

August 21, 2020
Disable Auto-Update Email Notifications in WordPress V5.5+

If you're annoyed with the auto-update email notifications, then in this post I am going to share step by step method to disable those auto-update email notifications using code snippets for WordPress beginners.

Read More
September 3, 2020
How to Display PODS Custom Fields in Oxygen Templates

If you are a PODS Framework lover or you missed out on the ACF Pro LTD, and now want to use PODS with Oxygen Builder to display the custom fields in a template, then in this post exactly I will show you how to achieve that.

Read More
1 2 3 8

Leave Your Feedback

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Blog Categories

Favorite Products

WordPress Support - Sidebar Widget Ad Banner Image - SyncWin
SyncWin Community Group Ad Banner Image - SyncWin
Top menu-circlecross-circlechevron-down-circle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram