Add a nice hover to the 1st Brand name - Dawn theme

[Dekanten]

Hi

I want to change something on my product page and hope that could be fixed aswell, the first productbrand should have a nice hover/button (who shows this is a collection) . Can this be arranged?

Storeurl:

www.dekanten.no

See attached image

[Sweans]

Hi @Dekanten ,

You can achieve the desired result by simply adding the below code to a specific line in the base.css file of your shopify theme. You can follow these steps to do that:

Step 1: Open the base.css file Go to Shopify backend→ Sales Channel → Online Store → Themes → click the three dots near your active theme → Edit code → Search for base.css in the search section(See the screenshots below):

Step 2 : Add the code block Add this code block to the bottom of the base.css file .

Text Hover Color:

a.product__text.caption-with-letter-spacing:hover {
    color: #000; /* Adjust the color as needed */
}

Button Styling:

a.product__text.caption-with-letter-spacing {
    padding: 6px 15px;
    background-color: #000; /* Adjust the background color as needed */
    color: #fff !important; /* Adjust the text color as needed */
    display: inline-block;
    border-radius: 2px; /* Adjust the border-radius as needed */
}

Feel free to customize the colors and other values to suit your preferences.

Once this is done you will have a result like this

Hover State: Final Result

Button: Final Result

If you found this helpful, leave a like and choose this as the accepted solution,
If you have any other queries feel free to ask me as well.

Regards,
Sweans

[Dekanten]

Hi

Thank you for your support, we are into something now but i tried the code in this order under theme:

There is no hover effect on this button, is it something i do wrong?

a.product__text.caption-with-letter-spacing:hover { color: #000; /* Adjust the color as needed */ } a.product__text.caption-with-letter-spacing { padding: 6px 15px; background-color: #000; /* Adjust the background color as needed */ color: #fff !important; /* Adjust the text color as needed */ display: inline-block; border-radius: 2px; /* Adjust the border-radius as needed */ }

[Sweans]

Hi,

You have applied the following CSS code for the hover effect:

a.product__text.caption-with-letter-spacing:hover {

  color: #000;

}

However, this style is being overridden by another rule. To resolve the issue, please add !important after the color property, as shown below:

a.product__text.caption-with-letter-spacing:hover {

  color: #000 !important;

}

This will ensure that your style takes precedence.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[Dekanten]

Hi again, thanks for the update and everything works fine now. Glad to see the result, i changed the padding to match the page. Thank u very much for the great support. Love it.