Remove Unused CSS

Need to improve your PageSpeed score? Enter your website address to see how much CSS you can remove:

Quick & free. No signup needed.

3D Buttons

We can make a button feel like a 3 dimensional one by applying certain effects to it when pressed. In this article, we will create a 3 dimensional button press effect and look at similar examples.

Let’s create a button and give it some styling.

<button class="button-3d">&#9998;</button>
button.button-3d {
  background-color: #48abe0;
  color: white;
  border: none;
  padding: 5px;
  font-size: 31px;
  height: 130px;
  width: 130px;

We notice that the button doesn’t feel 3D yet. It is just a flat surface, resting on another flat surface. Let’s add a box-shadow to it so that it feels 3D and a bit higher from the surface.

box-shadow: 0 2px 4px darkslategray;

Now that we have our button feeling like 3D already, all we need to do is to adjust the button position and its shadow when it is pressed - in a way that the effect feels like a physical key press. What happens when you actually press a button on your keyboard? The button moves a bit down and its shadow disappears because it has reached the level of the surface behind/below it. Let’s apply the same effect to our virtual button. We will translate it slightly down on the Y-axis and shrink its box-shadow. We will also add a transition so it appears to be visually moving. The transition should be very short so the button still feels fast and responsive.

button.button-3d {
  transition: all 0.03s linear;

button.button-3d:hover {
  background-color: #65b9e6;

button.button-3d:active {
  box-shadow: 0 0 2px darkslategray;
  transform: translateY(2px);

There we go. The button press feels like a physical three dimensional one.


Note: These pens look best on tablets/desktops.

A set of minimalistic, 3D buttons

See the Pen Minimal Circular 3D Buttons by Chris Coyier (@chriscoyier) on CodePen.

A catalog of 3D buttons designed with Bootstrap

See the Pen Bootstrap 3D buttons by Artur (@bepctak) on CodePen.

Buttons that transition from being flat to being 3D on hover

See the Pen Flat-to-3D buttons by Matteo Belfiore (@heartbox) on CodePen.

3D pushable buttons

See the Pen Flat-to-3D buttons by Matteo Belfiore (@heartbox) on CodePen.

Buttons with 3D lightning and shadows

See the Pen 3D buttons by Michelle Barker (@michellebarker) on CodePen.

A 3D ribbon for a navigation menu

See the Pen CSS3 Ribbon Menu by Steve Belovarich by Steve Belovarich (@steveblue) on CodePen.

3D social media icons with a perspective

See the Pen Buttons by Alexander Lead (@alexlead) on CodePen.

3D Button Group

See the Pen 3D Buttons by Dan Andersson (@praktikdan) on CodePen.

A 3D navigation menu with realistic push/press effect

See the Pen Realistic 3D Buttons by silas. (@silas) on CodePen.

Neumorphic 3D buttons

See the Pen Neumorphic CSS Buttons by Kev_kan_code (@kkanyingi) on CodePen.

A button that becomes 3 dimensional on hovering

See the Pen 3d Hover Button by Sarthak Mund (@sarthak_mund_s3) on CodePen.