Button Hoover over change of color

[PhMA]

Dear Community 🙂

We are using the refresh theme, how can I apply that upon hover over of the button the button fill will change 

reversed based on existing color schema, so for example I have the following buttons:

already filled buttons:

 upon hover over the should change to this style :

and then these button styles:

upon hover over, they should get filled, like so:

 

how to achieve that behavior?

thanks

[Made4uo-Ribe]

Hi @PhMA 

Would you mind sharing your store URL? And which buttons you like to add the hover? Thanks!

[PhMA]

@Made4uo-Ribe  preview link: https://ahevwo2awzzu5sq4-61049766108.shopifypreview.com I'd like to have this behavior on all the buttons on the webpage, thanks

[Made4uo-Ribe]

Thanks for the info, check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

{% if template.name == 'index' %}
<style>
a.button:hover {
    transition: box-shadow var(--duration-short) ease;
    -webkit-appearance: none;
    color: #66B2B2;
    background-color: white;
}
</style>
{% endif %}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[PhMA]

@Made4uo-Ribe  many thanks, but:

on this wepage it is not working: https://n13b197j6p357krg-61049766108.shopifypreview.com

sobre matu ->¿Qué es Matu Mate®?

then "origen de yerba mate" subpage  -> at the bottom "mas productos" , its also not working

Ser Distribuidor footer page -> at the bottom "nuestros productos" its also not working

then all the buttons "aggregar al carrito" (to add to a basekt) on all the products, its not working -> there the "behavior" need to be the other way around....

[PhMA]

@Made4uo-Ribe  many thanks for your reply,

https://ebjz4pbqmllhtt2g-61049766108.shopifypreview.com