How to create a button with an icon in Oxygen? I have seen new users ask this question 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.
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, and 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, and set the Font Weight, Text Transform, and 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 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.
Thank you for visiting syncwin.com!
