Is it possible to create this 3d button ?
Hello community is my first post on this Chanel. I'm french guy and my English is not perfect 😉
I'm not pro in css and i want some help 🙂
I want to create this 3d button but the problem is to keep all the black edge.
I have try many solutions :
- work with the box shadows actually the best way (add extra black box shadows at the end) but it's impossible to have the 45° edge black.
this is the best i have trying https://codepen.io/morel-victor/pen/NWmpPNr
- work with perspective but is tricky when animate
Can someone help me ? 😄
Than'ks have a good day !
5 Replies
You might want to change a few values, but this should be getting close to what you're looking for. https://codepen.io/Sven-Joseph/pen/gOymber
It still needs some fine-tuning on the active settings to make sure there are no overlaps of the borders.
Thank's a lot for your response ❤️ with some few adjustment i love my button https://codepen.io/morel-victor/pen/WNWpvaY
i have an other question is it possible to have active state to keep the hover effect ??
I know you already have a solution better than mine, but I wanted to share what I figured out 😅 😪
https://svelte.dev/repl/c67919275e604419a723cd296d98c896?version=4.2.12
3d button • REPL • Svelte
Cybernetically enhanced web apps
Well done! 👍