TASTE THEME: Add hover color to collection page add to cart button

[PRETTYFRIDAYS]

Hey, I am building my store but I have a problem, when I hover over my add to cart button on the collection page, the colour does not change, which would be ideal. Does anyone know how to? Thanks in regard!

LINK: https://e8aaa0-3.myshopify.com/products/body-wash-vanilla-amber?pr_prod_strat=e5_desc&pr_rec_id=b11975176&pr_rec_pid=7291706048649&pr_ref_pid=7327814713481&pr_seq=uniform&variant=41486122909833

PASSWORD: mohwhi

THEME: TASTE

[BSS-Commerce]

Hi @PRETTYFRIDAYS ,

Please follow these steps:

Online store → Edit code → find base.css file

Copy this code to the end of the file:

.quick-add__submit.button:hover {

color: color-you-want

border-color: border-color-you-want

border-color: border-color-you-want

}

For example:

.quick-add__submit.button:hover {

color: red

border-color: yellow

border-color: blue

}

Hope it works @PRETTYFRIDAYS

[PRETTYFRIDAYS]

Hey! Does not work unfortunately

[BSS-Commerce]

Hi @PRETTYFRIDAYS ,

Try this again:
Step 1: Online store → Edit code

Step 2: Find the base.css file, and add this code to the end of the file:

.quick-add__submit.button:after {
display: none;

}
Step 3: Find the theme.liquid file, add this code to the end of the file:

<script>
var quickAddBtns = document.querySelectorAll('.quick-add__submit.button');
quickAddBtns.forEach(quickAddBtn => {
    quickAddBtn.style.border = "1px solid black" 
    quickAddBtn.addEventListener('mouseenter', function () {
       quickAddBtn.style.color = "text-color-you-want"
       quickAddBtn.style.border = "1px solid border-color-you-want" 
       quickAddBtn.style.backgroundColor = "background-color-you-want" 
    })
    quickAddBtn.addEventListener('mouseleave', function () {
       quickAddBtn.style.color = "black"
       quickAddBtn.style.border = "1px solid black" 
       quickAddBtn.style.backgroundColor = "transparent" 
    
    })
});
</script>

Result:


**Hope it works @PRETTYFRIDAYS **