Shopify themes, liquid, logos, and UX
Hey folks!
I want to achieve something like this for my buttons in the hero sections:
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!!
Hi @martujv
Where is the image you sent located?
When I visit your site, I only see it like this.
Best,
Daisy
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.
Hi @martujv
.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;
}
I hope this helps
Best,
Daisy
@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
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?
Hello @martujv,
Here are the steps to apply the necessary changes in your Shopify store:
.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;
Change the css values according to your requirements.
Let me know if you need further assistance!
Hello, this didn't make the button semi transparent
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!
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?
Hello @martujv ,
Here are the steps to apply the necessary changes in your Shopify store:
.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;
}
Let me know if you need further assistance!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025