How can I add a shadow to my WhatsApp Buy button?

Store Design
1

I recently added a WHATSAPP - BUY button to the product page of my SHOPIFY STORE. I did it by adding first the link to a “personalised liquid” in the editor and then the button formatting to the CSS section (see code snipet below). The thing is that all the other buttons on my store have a shadow and the WHATSAPP - BUY button does not. Can anybody ad that part of the snipet that would allow me to give the button later more or less shadow by changing the value in the sniper, please?

2

Please share me your store link to check

3

Hello - of course - please receive the link to the product page:

https://petitziluet.com/products/short-biker-con-bolsa?variant=43998521950466

The code I used to make the WHATSAPP BUY BUTTON is the following (put in the CSS section):

.btn–buy-on-whatsapp {
display: block;
margin-top: 20px;
padding: 10px 30px;
font-size: 15px;
line-height: 1.5;
color: #121212;
background-color: #fff;
border: 1px solid #4e4e4e;
border-radius: 8px;
text-align: center;
text-decoration: none;
transition: all 0.3s ease;
}
.btn–buy-on-whatsapp:hover {
background-color: #fff;
color: #4e4e4e;
border-radius: 8px;
}
.btn–buy-on-whatsapp {
max-width: 44rem;
}

4

Please update your above code to this

.btn--buy-on-whatsapp {
display: block;
margin-top: 20px;
padding: 10px 30px;
font-size: 15px;
line-height: 1.5;
color: #121212;
background-color: #fff;
border-radius: 8px;
text-align: center;
text-decoration: none;
transition: all 0.3s ease;
}
.btn--buy-on-whatsapp:hover {
background-color: #fff;
color: #4e4e4e;
border-radius: 8px;
}
.btn--buy-on-whatsapp {
max-width: 44rem;
}

And then add button class to your what app button code

Screenshot_2.jpg
Screenshot_2.jpg1516×833 142 KB

5

Thank you very much but I can not do the second part. I thought changing the code in CSS was enough to change the button.

6

Hi @alexhahner

Could you try to update your css code to this and check again?

.btn--buy-on-whatsapp {
display: block;
margin-top: 20px;
padding: 10px 30px;
font-size: 15px;
line-height: 1.5;
color: #121212;
box-shadow: 0 0 15px 5px #00000025;
background-color: #fff;
border-radius: 8px;
text-align: center;
text-decoration: none;
transition: all 0.3s ease;
}
.btn--buy-on-whatsapp:hover {
background-color: #fff;
color: #4e4e4e;
border-radius: 8px;
}
.btn--buy-on-whatsapp {
max-width: 44rem;
}
7

That really did the trick:-) Thank you so much.

8

You are very welcome :wink: