Changing effect on button

Hello Sydney Community,

I am very sorry if my question seems stupid or anything (I’m very noob at creating websites).

Actually, I have two buttons on y homepage, the first one is on the top slider.
When hovering it with the mouse, it goes from full red with text to transparent, only displaying the button text and frame. This is good.

However, I added one other button through the contact widget and the effect is right the opposite that is to say only displaying the button text and frame when not hovering it with the mouse and turning full red with text when hovering it.
I would like the second button to be like the first one, getting the same logic of transparency when hovering but being full red with text when not interacting with the button.

I could not find such option in the contact widget (or did I miss something?)

Thank you very much for any help/tips you can provide. :slight_smile:


Hi Eme,

It can be accomplished by adding the following CSS code into Appearance > Customize > Additional CSS in your dashboard.

.roll-button {
  background-color: #d65050 !important;
  color: #fff !important;

.roll-button:hover {
  color: #d65050 !important;
  background-color: transparent !important;


Hi Eme,

Please try the code snippets in here

If its not working, please share your site URL.


Hello Kharis Sulistiyono, thank you so much, it works like a charm!

Thank you very much Awan too (actually the code you gave me does the opposite effect but again thank you very much for sharing the link, I guess my explanation was really bad!).