Buttons - add shadow

Hi, is there a way to add a shadow to a button?

Thank you

Sorry, I cannot resist 😄

2 Likes

Thanks @Jannis . After reading this, how do I target the button I use in source? I am not very well experienced with css…

you can add Source’s inbuilt drop shadow by adding the class s-shad (see the utility classes page on the knowledge base for more information).

If you want to create your own shadow effect as described in the link then again you can add the class name here that you would want to use to target.

2 Likes

@habitualshaker In case you will be working on this. I would love to have the option to add a subtle, translucent white gradient overlay to give the button a kind of three dimensional appearance.

Try to play around with ChatGTP. It will give you quite a comprehensive answer with detailed explanation.

Prompt:

Add a subtle, translucent white gradient overlay to give a button a kind of three dimensional appearance with CSS.

Thank you. I do not have chatGPT, I try Gemini.

You can use the the free version of ChatGTP therefore.


Screenshot 2024-10-06 alle 02.24.03

😎

Hi @Gianluca hey really cool. Is it possible to have the same with an animated dropdown effect and a blink at each shadow that appears? 🤣 (just in case I precise for @Jannis that it’s a joke 🤪)

@Gianluca Ah thank you very much for this. Now I have a better understanding of the syntax.