Home>Support>Creating a border around a button – Button widget

Creating a border around a button – Button widget

By Lynn Greenwood, 7 years ago. Last reply by Lynn Greenwood, 7 years ago.

Hi

I’m trying to update the atom button ‘shadow’ for ‘Lees verder >’ on http://newwvw.akvotest.org to have a white border around the actual button itself (not a border around the widget box)- I’ve been looking for some css online to fix this but they all seem to point to adding a border around the widget itself.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 6 months ago Alex S
    Hi, I Work Here

    Hi Lynn,

    You can do this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Now you have two options. You can enforce this white border on all buttons (including the red button) or just the intended buttons:

    For the former (all buttons), please add the following CSS to WP AdminAppearanceCustom CSS:

    .ow-button-hover {
	border-color: #fff !important;
}

.ow-button-hover:hover {
	border-color: #fff !important;
}

    For the latter (just the intended buttons), please open every button you wish to affect and head over to the row styles sidebar. Open the Attribute settings group and set the widget class to btn-border_overide and then add the following CSS to WP AdminAppearanceCustom CSS:

    .btn-border_overide .ow-button-hover {
	border-color: #fff !important;
}

.btn-border_overide .ow-button-hover:hover {
	border-color: #fff !important;
}

    You might also need to install the SiteOrigin CSS Editor.

  2. 7 years, 6 months ago Lynn Greenwood

    Thank you SO much! Worked great.
    Lynn

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More