Shortcode Button custom

[mrportugal]

Hi,

I searched for how to do this here but I could not find it.
I think it must be basic but here goes nothing.

I simply want to override the roll over color of one button generated with a shortcode. I believe it should be in the extra-class but I don’t know how and what code should I write to do this.

The buttons I want to change are the ones in the header of the homepage.

Many thanks.

[Mohammad – SUPPORT]

Hi,
Please tell me Button Name so i can find any possible solution.

Thanks
Mohammad

[mrportugal]

These two buttons please. (see attached image).

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

a.sf-button:hover {background: #dbae4e!important}
Thanks
Mohammad

[mrportugal]

So I added this custom CSS in the CSSeditor option under theme. But this css is now affecting in the color behaviour the the entire website. I want to control specifically those two button in the screenshot.

If I miss understood where to write the code, could you enlighten me where should I then?

[Rui Guerreiro – SUPPORT]

Hi,

Try to replace the previous code by this one:

.home .spb_multilayer_parallax a.sf-button:hover {
background: #dbae4e!important;
}

-Rui

[mrportugal]

Ok, Thanks. With that tip I was able to setup another color for the 3D button.

Could you just tip me on how to

1)Change the color of the bordered on hover
2)If possible, add a bit of opacity to the bg of the button (and respective color)

Thanks

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.home .spb_multilayer_parallax a.sf-button:hover {
background: rgba(219,174,78,0.7) !important;
border-color:#ff0000 !important;
}

Thanks
Mohammad

[mrportugal]

Hi,

Related to the bordered button:
That almost worked.
I can control the background and transparency but not the color of the border. It’s not changing that property.

Regarding the 3D button
I was able to change the background and text color but something is wrong with the text on hover. It fuzzy, or blured. Any idea why?

[Mohammad – SUPPORT]

Hi,
1- For border, use this custom css code:-
.home .spb_multilayer_parallax a.sf-button:hover span.sf-button-border {
border-color:#ff0000 !important;
}

2- I am not getting this issue.

Thanks
Mohammad