Changing the hover state of a button

Hi,

I'd like to change the hover state of the primary buttons on my site so that the hover state is more obvious.

At the moment the button is dark grey with white text. When hovering on it, the background turns slightly less grey.

I'd like it to be more obvious — either underlining the text or turning to a white background with black text. 

Does anyone know an easy way to make either of these changes?

Thank you

Website: https://www.zoehough.com/

Hi @tuanphan Thank you for sharing, but this code does not work for me. I have edited the borderradius for the buttons in my style editor. But somehow the hoverstate does not change accordingly and It seams unresponsive targeting it with custom css.   
 

I have tried  the code you suggested. 

div.button-block a.sqs-block-button-element:hover {
    background-color: #fff !important;
    color: #000 !important;
    opacity: 1 !important;
}

Also inspecting and searching for the correct class in chrome and using below values in the above codeblock. 

.sqs-block-button-element 
.medium sqs-button-element 
.primary sqs-block-button-element

Below are some example from how the buttons now look in default state and with hover in white. 

https://www.lizanbloomcoaching.nl/
P: zelfliefde

Do you have any other suggestions?

Thank you so much @tuanphan really appreciate your reply 🙂

That worked, and I added an extra line to give the hover-state button a black border

div.button-block a.sqs-block-button-element:hover {
    background-color: #fff !important;
    color: #000 !important;
    border: 2px solid black;
    opacity: 1 !important;
}