Make Button transparent with only image icon

Hi Kalle,

Open your SiteOrigin button widget up, open the Design and Layout settings group and set the button theme to Flat.

Is that what you were after?

Hi Kalle,

If that’s the case, please set the style to wire. Once you’ve done that head over to the widget styles sidebar and open the attributes group. Set the class as no_border and then save the page.

Then to add the required CSS please navigate to If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

.no_border .ow-button-hover {
	border: none !important;
}

.no_border .ow-button-hover:hover {
	background: none !important;
}

You might also need to install the SiteOrigin CSS Editor.

Hi Kalle,

You can do this by adding the following CSS:

.no_border .ow-button-hover {
    width: 100px;
    height: 45px;
}

Please note you’ll need to make adjustments to the CSS.

You might also need to install the SiteOrigin CSS Editor.

Hi Kalle,

Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

Hi Kalle,

I stand corrected. Please replace:

.no_border .ow-button-hover {
    width: 100px;
    height: 45px;
}

With:

.no_border .sow-icon-image {
	height: 45px !important;
}

Regardless upon inspection of your button, you would likely be better off with a simple image link as that’s basically all it is.