DEV Community

Brandon Weaver
Brandon Weaver

Posted on

1 1

A Simple Trick for Creating 3D-Style Buttons with CSS

This week, I wanted to revisit CSS and focus a little more on styling than I usually would. During this time, I focused on button styles, and I worked on a few ideas I've had for a while now; there's one in particular which I think turned out really nice.

I used a couple of box shadows to create the illusion of a three-dimensional button, and I think that the result is great. The only downside is that the inset shadow needs to be manually set, rather than transparent/translucent to match the background of the container.

Top comments (0)

Image of PulumiUP 2025

From Cloud to Platforms: What Top Engineers Are Doing Differently

Hear insights from industry leaders about the current state and future of cloud and IaC, platform engineering, and security.

Save Your Spot

Pieces AI Productivity Summit

​Join top AI leaders, devs, & enthusiasts for expert talks, live demos, and panels on how AI is reshaping developer productivity at the Pieces AI Productivity Summit.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️