Blurred Transparent Background for Buttons

Store Design
, , ,
1

Hi,

I am trying to make my button backgrounds for a section on my main index page with blurred transparent background. Any help would be appreciated.

Store: is-salon-yaletown.myshopify.com

2

I am guessing you mean the buttons on your sections that are transparent and you want a blury background on them? If so here is some css you can place under theme settings >custom CSS

.armament-button {
  background:rgba(255,255,255,0.1)!important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,0.2)!important;
}
.armament-button:hover {background:rgba(255,255,255,0.2);backdrop-filter:blur(12px);}
.armament-button::before,.armament-button::after {background:transparent!important;}

Hope that helps.

3

thank you so much!

1 Like
4

Any idea how to make those boxes greyscale as well, and on hover they change to colour?

5

Your welcome :slightly_smiling_face:

6

Hi,

You can try using this CSS—just change the hex code to the color you want for the hover effect:

.armament-button { 
  filter: grayscale(1); 
  transition: 0.3s; 
  border-color: #999 !important; 
}  
.armament-button:hover { 
  filter: grayscale(0); 
  border-color: #06c !important; 
  color: #06c !important; 
}

For your second question, it depends on your theme and available sections. You could use metafields to pull in specific images or text for certain products.

If you’d like me to take a closer look, you can share a collaborator request code by going to:

Admin > Settings > Users and permissions > Collaborators

Once you provide the code, we can proceed with the next steps.

Let me know how you’d like to move forward! :blush:

7

Thanks, but I mean the background of the boxes, not the button.

Can I send you a private message with the code?

Thanks again for your time and help.