How can I create transparent buttons on my home page?

[bthorne1]

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

 

[Luke_f]

try the opacity property in your theme css...

find the button selector, and specific 

opacity: 0.5;

[bthorne1]

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]

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
}

Cheers!

[bthorne1]

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

 

[GabrielS · 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.

[bthorne1]

@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]

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 example