Transparent Primary Button on Hover for Desktop + Mobile

Store Design
, ,
1

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/

2

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

prakashVt_0-1733462055882.png
prakashVt_0-1733462055882.png538×415 285 KB

3

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!

4

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

5

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

6

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:

LizHoang_0-1733660884764.png
LizHoang_0-1733660884764.png707×593 499 KB

7

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