Tagged: Buttons, drop shadow
Hello All, I have tried the css code here: https://kriesi.at/documentation/enfold/button/#toggle-id-34 to attempt to add a drop shadow to my buttons with no luck. I tried pasting the code into the quick css text field in General Stying settings as well as Appearance/Customize/Additional CSS but nothing changes for my buttons. I pasted this code:
/* Remove button border */
.my-custom-button .avia-button {
border: none !important;
}
/* Box-shadow border */
.my-custom-button a.avia-button {
box-shadow: inset 0px 0px 0px 4px gold !important;
}
Any assistance would be greatly appreciated.
Hey Mark,
I’m currently seeing a drop shadow on the buttons:
https://snipboard.io/WfHigk.jpg
Best regards,
Jordan Shannon
Hi Jordan – thanks for the quick reply. Yes, there is indeed an effect on the button but not a true drop shadow as it appears more like a border in the color of the button rather than a true shadow similar to the box shadow in the page builder settings for columns etc.
I’m looking for something more like this: https://snipboard.io/xqJ2b4.jpg
Please take a look and let me know what you think. I am still not understanding why no change as well when I use the code provided in the docs.
Thanks – Mark
Hi,
So you want the shadow moved out more? Try the following:
a.avia-button {
box-shadow: 0 0 20px 0 #7ba6bb!important;
padding: 20px!important;
}
Best regards,
Jordan Shannon
Hi,
Adjust the css to this:
a.avia-button {
box-shadow: 5px 5px 10px #7ba6bb!important;
padding: 20px!important;
}
Best regards,
Jordan Shannon
Hi,
No problem. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon