Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages
Filter by Categories
Digital Marketing
Email Marketing
Entrepreneurship
Oxygen Builder
Search Engine Optimization
Social Media Marketing
Web Design & Development
Web Strategy
WordPress

3 Step Method to Create Buttons with Icons in Oxygen

Written by:
Mohammed Wasim Akram
First Published on:
October 21, 2020
Last Updated on:
December 3, 2020

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.

Affiliate Disclaimer

Please note I 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 buying them.

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 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

Leave a Comment

Blog Categories

Popular Posts

WordPress Support - Sidebar Widget Ad Banner Image - SyncWin
Piotnet Forms Plugin - Image Ad Banner - SyncWin
Hydrogen Pack Plugin - Image Ad Banner 02 - SyncWin
Advanced Scripts WordPress Plugin - Image Ad Banner - SyncWin
SyncWin Community Group Ad Banner Image - SyncWin
Top arrow-circle-o-downmenu-circlecross-circlechevron-down-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram