Boxy Buttons

We’re going to get to these “boxy buttons,” but we’re ultimately going to use box-shadow to make them, so let’s take a quick box-shadow journey.

The basic use cause for box-shadow is giving an element the appearance of three-dimensionality by applying a shadow underneath it as if it’s been lifted off the surface.

The slight shadows applied to those white boxes are done by:

.module {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

Which is to say:

1. Make an exact copy of the shape this element (respecting the border-radius, for instance) and put it underneath the element
2. Offset it by 0 horizontally and 1px (down) vertically
3. Blur it by 3px. There is an optional parameter after the blur called spread which allows you do expand or contract the shadow, which defaults to 0 (doing neither).
4. The background of it will be black with 0.2 opacity

That’s so basic though. C’mon. We can get weirder than that. Consider:

1. You can get extreme with those offsets.
2. You don’t have to blur the shadow at all.
3. The colors don’t have to be subtle.

And most importantly:

4. You can apply multiple shadows

Here are three differently offset shadows with no blur:

.module {
  width: 100px;
  height: 100px;
  background: white;
  box-shadow:
    5px 5px 0 #FF9800,
    10px 10px 0 #FFC107,
    15px 15px 0 #607D8B;
}

We could push those offsets further, making the “shadows” entirely separated from the element:

.module {
  width: 50px;
  height: 50px;
  background: white;
  box-shadow:
    55px 55px 0 #FF9800,
    110px 110px 0 #FFC107,
    165px 165px 0 #607D8B;
}

So now that we know we have the ability to have unlimited shadows of any size that can be placed anywhere… we can draw pixel art! All with a single element! Here’s a burger, fries, and shake done by Marcus Connor:

Steve Jobs as done by Codrin Pavel:

Or how about the Mona Lisa done with about 7,500 shadows, by Jay Salvat:

On a slightly more practical level, you can layer box-shadow to simulate three-dimensionality and directional shadows. Boxy buttons!

The trick is that we use zero-blur shadows laying them on top of each other. If we do that 1 pixel at a time and alternate sides as we do it, they way the shadows stack on top of each other gives us an opportunity to create a 3D box look. Here are the basics:

.boxy-button {
  --bottom-color: #999;
  --right-color: #ddd;

  box-shadow:
      1px 0   0 var(--right-color),
      1px 1px 0 var(--bottom-color),
      2px 1px 0 var(--right-color),
      2px 2px 0 var(--bottom-color),
      3px 2px 0 var(--right-color),
      3px 3px 0 var(--bottom-color),
      4px 3px 0 var(--right-color),
      4px 4px 0 var(--bottom-color);
}

Keep going with that, and we can make a very boxy button indeed.

Toss some transitions on there and we can even make it feel very pressable:

We could use the one-line-at-a-time shadow technique for the “outer” shadow as well, faking the gradient by reducing the opacity of the shadow a bit each time. That makes more a directional shadow look that can be cool.

Here’s an example where the direction goes the other way (thanks to negative box-shadow offsets) and uses the directional shadows.

That’s an awful lot of code for a fun button, but aren’t buttons worth it? With a good bit less code, we can get another pretty fun offset look, only this time using some inset box-shadow trickery and little pseudo-elements to fake the continued border look.