Change button hovering style

[Kreamch]

I’m trying to change buttons across the homepage (main banner “view products”; “add to cart”) hovering style to outlined style. Currently the style of button is solid, while when hovering the button becomes more intense in color, and I would like to hover to a outlined style with inverted color. Is this possible?

In attachment an image for reference.

My website is https://kream.ch, theme is pipeline, and the orange is code: FF763D

thank you for your support

[goldi07]

hello @Kreamch

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->theme.css…> …add the code end of the file

.hero__description.rte.body-size-8.aos-init.aos-animate p :hover {
    text-decoration: underline;
}

.hero__description.rte.body-size-8.aos-init.aos-animate p:hover { 
    text-decoration: underline;
    text-decoration-color: #FF763D;
}

a.standard__cta.hero__btn.btn.btn--primary.btn--long.aos-init.aos-animate:hover {
    background-color: white;
    border: 3px solid;
    color: #FF763D;
}

button.stain-button-primary:hover{
    background-color: white;
    border: 3px solid;
    color: #FF763D;
}
button.stain-button-primary .btn-state-ready:hover {
    color: #FF763D;
}

If this was helpful, hit the like button and accept the solution.
Thanks

[Dan-From-Ryviu]

Hi @Kreamch

You can add this code to theme.liquid file, after in Online Store > Theme > Edit code and check again

[Kreamch]

Works, Thank you very much