In this tutorial we're going to look at a couple of quick and simple ways to add buttons with icons to the Oxygen Builder. The default editor doesn't contain a button with icon element, so we're going to need to make our own. There are a couple of ways to do this, and because we're making our own, we actually end up having more flexibility in the design, styling, and effects of the UI element.

Why Add A Button With An Icon To The Oxygen Builder?

If you're coming from Elementor, you're probably familiar with their easy way to add an icon to the button. You may be looking for a way to do this in the Oxygen Builder, though there's no functionality like this built in.

Adding an icon button to the Oxygen Builder can be very helpful in some circumstances. We like using them to spruce up a basic button and give context as to where the button may lead the user.

Basically, they make our websites look better, and become easier to use, so we're big fans of buttons with icons.

Now, let's take a look at some of the ways that we can easily add a button with an icon to Oxygen.

Method 1: Link Wrapper

The first method keeps everything within the Oxygen Builder, and uses pre existing components to easily create a button with an icon.

We're going to use some structural elements to create a “button”, which is actually a clickable column element that has hover effects applied to it. One of the columns will contain the icon, while the other column will contain the but in text. What's nice about this method is that you can completely control the sizing and additional aspects of your button. Let's go through this process of making an icon button using Oxygen Builder elements step by step.

First, add a column Element with two columns. We're going to make one column 33% wide, while the other column will be 66% wide. The overall width of the actual button will be 200px.

Now, we're going to set the background and border of our column element. This is what will look like the button. We're going to set this to be blue with a Gray border. We set the border radius to be 5.

Now, using the built in event styling, we're going to change the background color when the user hovers over the button. This makes it more buttonlike, and visually identifies to the user when they are hovering over the element.

Choose :hover, set the styling.

Now, we're going to add our text to this button, as well as the icon. First, the text. We're going to try to keep it on one line, so all it's going to say is “contact”. We're going to set the column div to align the text centrally both horizontally and vertically.

You can also play with the margins and paddings to change the sizing of the button within the Oxygen Builder.

The final thing we're going to add is our icon. From the builder interface, simply choose an icon element, and drag it into the left column of our button. finally, select the entire column, and create a link wrapper around it. Set your link to whatever you want the button to point to. Resize everything to fit, color the icon, and congratulations - you have quickly created an icon button in the Oxygen Builder.

We don't cover these aspects in this article, but you can add additional effects that occur when the user hovers on the button, such as a transform effect that moves the icon left or right. Doing this makes your icon button even cooler! You will also want to focus on the responsive aspect, because columns by default will collapse when the screen size gets too small. You can choose to keep this feature, or disable it in the Oxygen Builder settings.

Method 2: HTML & CSS

If you're looking for a more flexible way to add a button with an icon to the Oxygen Builder, using straight HTML and CSS (and perhaps a little bit of JavaScript) could work well for you. Typically, if we're looking for a fancy icon button, we’ll go on to Codepen, find a button, and insert it into Oxygen via the code block. This method is also great because you're using the actual HTML5 <button> element.

For this example, we have found a subscribe button that we really like. Not only does it have an icon, but it also has a neat hover effect done with CSS.

Inserting icon buttons into Oxygen Using the HTML and CSS method is fairly simple. All you need to do is identify the code that needs to be copied from code pen Into the code block. Once you figured that out, simply placed the HTML into the HTML section of the code block, and the CSS into the CSS section of the code block.

After that, you're good to go and have a fully functional icon button in Oxygen Builder. Furthermore, buttons on code pen can be extremely complex to recreate, and this saves you a lot of time, while implementing a really well designed UI element.

Conclusion

Our favorite way to add an icon button to the Oxygen Builder is method 1, which involves using divs, column elements, another default Oxygen Builder components to create a responsive, well designed icon button.

You can also end up saving this as a reusable piece, saving you a lot of time in the long run. If you're looking for a more complex icon button to add to Oxygen, you can simply browse through code pen and copy and paste that code directly into a code block element.

Hopefully this article introduced a couple of ways that you can easily add an icon button into the Oxygen Builder. If you have any questions, reach out in the comment section below.