Transparent Primary Button on Hover for Desktop + Mobile

[duart2023]

Looking to add a transparent feature by 50% for primary buttons on Hover for desktop + mobile. Currently the button s white so it would be half transparent on hover

URL: https://duoarthouse.com.au/

[prakashVt]

Hello @duart2023 
Do you mean it should look like this? 

[duart2023]

Hi @prakashVt Yes, only when mouse of hovering on it. Could you please assist?

[LizHoang]

Hi @duart2023 

You can follow this instruction : 

1. Go to Online Store -> Theme -> Customize
2. Open Theme Settings > Custom CSS > Paste this code to the section > Save

.slideshow[data-transition=zoom] .slide:not(.image-overlay--bg-box) .overlay-text__button, .slideshow[data-transition=slide_fade] .slide:not(.image-overlay--bg-box) .overlay-text__button {
    opacity: 50%;
}

Here is the result: 

[prakashVt]

Hello @duart2023 
Looks like people already posted some solutions. If you are still struggling with those please let me know. 

[steve_michael2]

Hi  @duart2023 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.product-form .quantity-submit-row .quantity-submit-row__submit button[type=submit]:hover {
    opacity: 0.5 !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[LizHoang]

Hi @duart2023 

May I know which section on your website that you want to add transparent on hover please?  I will provide you solution on it