Change Quick-Add Button Design Style (Dawn Theme)

[Plantdays]

Okay, so I am using the Dawn Theme and I want to change the style of the Quick Add button. Here is what it currently looks like in my online store:

It shows up beneath the product price as a separate button. Instead, I'd like it to be a plus sign that shows up on hover only and looks like this:

Would appreciate any help/advice thank you!

[Dan-From-Ryviu]

Hi @Plantdays 

Please send your store link so I can check and provide code to do that.

[Plantdays]

Hi Dan,

Here you go: https://plantdays.com/

Thanks so much for your help.

[Dan-From-Ryviu]

 Hi @Plantdays 

Please try to add this code at the bottom of your base.css file and check

.quick-add {
    position: absolute !important;
    bottom: 122px;
    right: 0px;
    opacity: 0;
}
.quick-add.no-js-hidden:after {
    content: '+';
    font-size: 32px;
    color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.quick-add modal-opener {
    position: relative;
}
.quick-add__submit {
    min-width: 32px !important;
    color: transparent !important;;
    width: 32px !important;;
    height: 32px !important;;
    min-height: 32px !important;
    margin: 0 auto !important;;
}
.card-wrapper .card.card--card.card--media.color-background-2.gradient:hover .quick-add {
    opacity: 1;
}
@media (max-width: 767px) {
.quick-add {
    opacity: 1 !important;
    bottom: 152px !important;
}
}

[Plantdays]

Hi Dan,

Just wanted to clarify, is this part of the "theme.liquid" file at the bottom before:

</body>
</html>

Is this the base.css file you're referring to?

Thanks again,

Laura