Make A Button Button Semi Transparent

Make A Button Button Semi Transparent

martujv
Trailblazer
213 2 45

Hey folks! 

 

I want to achieve something like this for my buttons in the hero sections:

 

Captura de pantalla 2025-01-15 a las 20.18.29.png

 

The button becomes white but semi transparent. Apart from that I would like to add also a blurry effect to the semi transparent background, to make the text inside the button more visible.

 

My theme is Stiletto and my website is: https://6oi2c07cipuh22y6-60150284501.shopifypreview.com

 

Thanks in advance!!

Replies 10 (10)

DaisyVo
Shopify Partner
3782 412 498

Hi @martujv 

 

Where is the image you sent located?

When I visit your site, I only see it like this.

 

image_720.png

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
martujv
Trailblazer
213 2 45

I would need the semi transparent background in the button that you can see, so that when I add a video to the video hero it would look nice. The image that I sent was from another website that has this feature already.

DaisyVo
Shopify Partner
3782 412 498

Hi @martujv 

 

To complete your requests, please follow these steps:
  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.

 

 

.video-hero__text-container > .button-block__button > button::before {
    display: none !important;
}
.video-hero__text-container > .button-block__button > button::after {
    display: none !important;
}
.video-hero__text-container > .button-block__button > button {
    background: rgba(0,0,0,0.5) !important;
    color: white !IMPORTANT;
}

 

 

Here is the result: image_720.png

 

I hope this helps 

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

aksh_mon
Shopify Partner
1 0 0

@martujv  i did this by simply adding background-color to btn with rgba value and alpha set to 0.1 i.e rgba(255,255,255,0.1) u can set it to button element although to pseudo selector ::before and ::after span u can add font-weight for more font-size to text element i am sending u  a screenshot of above so Screenshot 2025-01-16 135712.png 

martujv
Trailblazer
213 2 45

Sorry I have very little knowledge of coding, what am I supposed to do exactly? Which code should I attach to the sections in which I want the buttons to be semi transparent?

ZestardTech
Shopify Partner
6071 1087 1458

Hello @martujv,

 

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:

 

.btn.btn--primary.btn--overlay::before, .shopify-challenge__button.btn--overlay::before {
    background-color: #ffffff42 !important;
  
}
button.btn.btn--overlay.btn--primary {
    --color-background-overlay-button-hover: none !important;
    --color-background-overlay-button: none !important;
}
.btn.btn--primary.btn--overlay, .shopify-challenge__button.btn--overlay {
    color: #fff !important;

 

ZestardTech_0-1737018118360.png

Change the css values according to your requirements.


Let me know if you need further assistance!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
martujv
Trailblazer
213 2 45

Hello, this didn't make the button semi transparent

ZestardTech
Shopify Partner
6071 1087 1458

 

Hello @martujv,

 

Please set a background image instead of a background color. Additionally, update the value of background-color from "background-color: #ffffff42 !important;" to "background-color: #ffffff21 !important;". You can also adjust this color using the color-picker option in the inspect element tool.

 

Let me know if you need any further assistance!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
martujv
Trailblazer
213 2 45

Thanks for your reply. Unfortunately, my coding knowledge is very limited and I'm not able to follow your point, what code should I put and where?

ZestardTech
Shopify Partner
6071 1087 1458

Hello @martujv ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:

 

.btn.btn--primary.btn--overlay::before, .shopify-challenge__button.btn--overlay::before {
    background-color: #ffffff1c !important;

}
button.btn.btn--overlay.btn--primary {
    --color-background-overlay-button-hover: none !important;
    --color-background-overlay-button: none !important;
}
.btn.btn--primary.btn--overlay, .shopify-challenge__button.btn--overlay {
    color: #fff !important;
}
    .video-hero__overlay {
   background:none !important;
}

 

ZestardTech_0-1737033877489.png

Let me know if you need further assistance!

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing