Re: Transparent buttons label theme

Solved

How can I create transparent buttons on my home page?

bthorne1
Excursionist
42 0 8

Hi, I am looking to make the buttons on the home page have a transparent background. Any help would be appreciated. Thanks

Screen Shot 2022-11-20 at 3.54.49 PM.png

Accepted Solution (1)
GabrielS
Shopify Partner
486 107 117

This is an accepted solution.

@bthorne1  you've currently placed it within the max-width tag - doing so, the changes will be applied only on mobile phones.

 

Applying the code that I've sent at the very end, after the brackets '}' would reflect the changes for both mobile and desktop.

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.

View solution in original post

Replies 7 (7)

Luke_f
Shopify Partner
9 0 2

try the opacity property in your theme css...

find the button selector, and specific 

opacity: 0.5;
bthorne1
Excursionist
42 0 8

Hi @Luke_f, I don't see that specific section upon searching the code and scrolling through the button section. I see background, color and border color properties underneath most sections but nothing regarding opacity

GabrielS
Shopify Partner
486 107 117

Hi there,

 

You can achieve that through CSS, by adding the below snippet at the end of your theme.min.css file.

.template-index .btn {
  background: transparent !important;
}

And to change the color too, you can make use of the below:

.template-index .btn {
  background: transparent !important;
  color:white !important
}

GabrielS_0-1668988960100.png

 

Cheers!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.
bthorne1
Excursionist
42 0 8

@GabrielS Thank you, is this the correct placement? I currently am not seeing any changes in this location.

Screen Shot 2022-11-20 at 5.08.26 PM.png

GabrielS
Shopify Partner
486 107 117

This is an accepted solution.

@bthorne1  you've currently placed it within the max-width tag - doing so, the changes will be applied only on mobile phones.

 

Applying the code that I've sent at the very end, after the brackets '}' would reflect the changes for both mobile and desktop.

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.
bthorne1
Excursionist
42 0 8

@GabrielS  Thank you, I can see it shown now. The only thing is I have a button on the bottom of my home page for a featured collection that is on a white background. With this code applied it is not visible. Is there a way to apply this code to just the image with text overlay and collection list section?

HELDERWRLD
Explorer
137 0 8

Hello @GabrielS 
Do you know how to do it now? The file that you mentioned doesn't exist anymore.

WEBSITE: www.diversusoficial.com
pass: diversusoficial

I want to make like the exampleScreenshot 2023-10-27 at 6.34.47 PM.png