Home>Support>Button hover

Button hover

By laudesign, 7 years ago. Last reply by laudesign, 7 years ago.

Hi,

I have tried to apply a hover effect to a SiteOrigin button. Have checked other posts here but can’t seem to get the right configuration.

First I added the following css:

.so-widget-sow-button-flat-d82fd1f439a7.ow-button-base a:hover {
background: rgba(126, 130, 126, 0.3)!important;
border: 1px solid #7E827E!important;
}

… which had no effect – when tried both in either style.css or the custom css field in the widget.

I then also checked the ‘Use hover effects’ button in the widget, but the background just fades to a lighter shade of green on hover.

Is there any way I can achieve the desired hover colours at all?

Web page: http://www.carbonplan.co.uk/
Button: SEE ALL SERVICES

Hope you can help – just let me know if you need more info

Thanks,

Loz

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, 10 months ago Alex S
    Hi, I Work Here

    Hi Loz,

    The class you initially used, so-widget-sow-button-flat-d82fd1f439a7, is an unreliable one. Anything that looks similar to will change upon adjustments to the form.

    Please add the following CSS to WP AdminAppearanceCustom CSS:

    .ow-button-base a {
	-webkit-transition: 400ms ease!important;
	transition: 400ms ease!important;
}

.ow-button-base a:hover {
	background: rgba(126, 130, 126, 0.3)!important;
	border: 1px solid #7E827E!important;
}

    Due to how consistent your buttons are and the similarity I’ve written the following CSS to be very general rather than specific. As such, it will affect all buttons. Please let me know if this is undesired.

    You might also need to install the SiteOrigin CSS Editor.

  2. 7 years, 10 months ago laudesign

    Sorry for the late reply Alex – that works great.

    Thanks for your help with this.

    Cheers,
    Loz

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