Remove button background on hover

Hello

I am hoping you can help me.

I want all buttons on my website to have a transparent background with a thin outline box around the text. I want the outline and text on all buttons to be gold. I have achieved this but now I want to make some changes upon hover.

I would like the text to go black AND the outline box to stay gold but also the background colour to fill gold on hover.

I tried so many things such as:

sqs-block-button-element:hover {

 border-color: #dcb05e !important;

 background-color: none !important;

 border: 2px solid #dcb05e !important;

}

and

.primary-button-style-outline .sqs-block-form .sqs-editable-button.sqs-button-element--primary:hover, .secondary-button-style-outline .sqs-block-form .sqs-editable-button.sqs-button-element--secondary:hover, .tertiary-button-style-outline .sqs-block-form .sqs-editable-button.sqs-button-element--tertiary:hover {
    background: #000 !important;
    color: #000 !important;

Nothing is working. I am now stuck with a fully gold button when you hover and gold text (which you can't read!) I know the above code is outdated since I already made some progress.

Pease help! Thanks 🙂

Can you share your website URL?

Yes it's:

https://www.lamaralighting.com/

passcode: maria

Thanks so much!

Thank you