Recreating the joy of physical buttons

View the project

Sometimes you find a design that strikes a chord of wonder and nostalgia. As we race to put glossy, glassy touch screens on everything around us, there is a rising wave of desire for actual engineered mechanisms. Touch, it turns out, must also include a physicality in order for us, as humans, to be satisfied. Buttons, toggles, switches, knobs, levers, handles, pulls — all are designed to connect with our most basic and arguably most important tool, our hands.

Car manufacturers are reverting from touch interfaces to go back to physical buttons. People are building and customizing mechanical keyboards. Even the kids are feeling the nostalgia and the bite of monthly streaming subscription fees and going back to dedicated MP3 players with physical buttons.

One notable company who has been designing and building stylish products even before this latest nostalgia wave, is Teenage Engineering. I first came across them when they released the gorgeous TP-7 audio recorder, but alas, the price was…let’s say significant. You can see the physicality and intention in all their products. They want to be touched. You want to hold them in your hands and explore the surfaces and interactions.

When they launched the K.O. II sampler, I was immediately drawn in by all the buttons and knobs. The whole thing just draws you in with color and texture. It’s somehow a 1980s vintage calculator masquerading as an audio sampler. Even the gray base is reminiscent of the beige computers I grew up with. I was so enamored that, in an act of skeuomorphism, I decided to try to recreate the buttons for the web. As a side note, there is a fine line between too much mimicry and just enough. My goal was to try to capture that fine balance as designed by Teenage Engineering — a beautiful, tactile experience.

Design & Development

In dissecting the photo of the sampler, a few key details stand out. Namely, the shadows and the borders are really doing most of the work to create the different button states. In fact, since the we’re trying to mimic physical buttons, there is no :hover state at all. There are only a default and an :active state. For the active button state, the borders get darker and the shadow moves from outside to inside. To get the lighting right for the borders, the top and left borders use the same color to set a single light source hitting the buttons from the top left. The same, albeit reversed, is true for the bottom and right borders — they share the same color. The majority of the colors are set via CSS variables, but you can also see some colors using hard coded RGB values. This is just a case of me tweaking the exact shade and never going back to create a new variable. Working at the speed of lazy.

I also considered using a gradient for the border to have a more seamless edge around the corners. Since gradients are not supported for the border CSS property, it would mean using a extra container with a gradient fill and then a mask or clip-path to cut out the middle for the button surface. It’s certainly possible, but seemed like a heck of a lot of extra work (and code) for just a smoother corner color.

Part of what makes the button press depth work is a visual trick. The square background behind the rounded button serves as the “seat” of the button. It’s the space the physical button sits. Think about your keyboard and you’ll get the idea. The default or “raised” state has the button sitting higher via the outer shadow. The active or “pressed” state has the button sitting lower via the inset shadow. It gives the impression of a size change, but it’s all accomplished via the shadows and the darker container.

The HTML is quite simple as I wanted to make the buttons actually use the <button> element. These are meant for actions, not links.

The toggles are almost identical in the design. Toggles are just sticky buttons really. Instead of an active state, it’s just an “on” state. The big difference is that I’m using the checkbox hack in the HTML to create the effect. Using an <input type="checkbox"> with the appearance set to none allows us to style it like the other buttons. Instead of the button’s :active pseudo selector, the inputs use the :checkbox selector so we can target the “on” state and style it.

I’m not sure I got the colors and shadow depth quite right, but it does give the correct effect. You can feel the button press and it is quite satisfying.

The text for the buttons in mostly inline as part of the <button> element. The small text is set inline via a data-* attribute and then appended to the button by a :before pseudo class which is all very cool.

/* buttons with secondary text/symbols added */
<button class="btn shift" id="btnC" data-copy-shift="↑">C</button>
.btn.shift::before {
  content: attr(data-copy-shift) / "Shift icon";
}

/* toggles with small text alone */
<input class="toggle org" id="btnR" data-copy="Record" type="checkbox">
.toggle::before {
  content: attr(data-copy) / "Record";
}

I’m not sure if this data attribute is the most accessible thing to do as it kind of triggers the “don’t hide content” part of my brain, so be sure to do a more research if you want to use it in production. Speaking of testing, it’s worth noting that there will be code differences between the Codepen examples and the actual project page. Different systems, different goals and hence, different approaches. For example, on the toggles I’ve approached the text copy in two different ways. In the Codepen, I used the CSS content property to add the text with a :before pseudo-selector. On the project page, I’ve used data-* attributes to add the text copy and then added some extra HTML for accessibility. I’ve been enamored with data attributes at work, so that’s probably why I used them. Of course, I then doubted myself and went back into the Codepen to add in the <span> and aria-labelledby for the toggles which may be overkill (or just straight up broken).

I didn’t recreate the entire sampler as I was really focused on the buttons, but I did drop in some of the little lights which are fun. They’re activated with Javascript on the buttons to toggle a “on” CSS class changing the color and shadow. There are also some half height buttons, but I never got quite happy with the result. I think the border-radius on those corners needs to be smaller.

I’m also enamored with the unit’s speaker grid as it reminds me of all the (now retro) devices from my teenage years. Maybe I’ll recreate it for a future project as it seems like it could be a nice reusable pattern.

In the meantime, let’s go back to physical buttons and where we can, let’s make our web buttons cool too. Go ahead and fork the Codepen and start making some true button buttons for the web. Heck, even the bevel edge web 1.0 88×31 buttons are back in fashion (and might show up here as well some day).

View the project

As any self respecting cigar or pipe smoker knows, the best way to light up is by using a wooden match. As such, I’ve got a boxes of wooden matches stashed all over the house, garage, pockets and car. It is one of those items that you never really think about too hard though. There’s no real reason to think about them beyond “does it work as advertised?” — in this case, does it light? Or did it break?

Recently, though, I picked up a box at the supermarket and noticed they had changed vendors. No longer was…whatever brand they previously sold. Now they upgraded to offer Diamond matches. It’s not an item that I would even notice usually, but as a designer I was immediately struck by the packaging. I have some vague memory of the brand, but it seems as though they’ve gone through a redesign. And I love it. It’s clean with a touch of vintage and really stands out on a shelf.

Digging a little deeper, it seems like the brand has be tossed around by various holding companies and private equity firms which makes it seem a bit less glamorous than America’s leading producer of matches.

But those graphics! The design! The style! What’s a poor designer to do, but start drawing?

Here’s a couple of versions of the single and crossed match illustrations and because it’s one of my favorite techniques, there’s also animated versions. Dropping a <style> tag inside the SVG with @keyframe animations is a great way to sneak an animation past a content management system. Just be sure you nest the animation inside a prefers-reduced-motion: no-preference media query.

The animation itself is just a combination of scale, translate and rotate transformations. The one nice one is the ability to flip the flame by using a negative value on the X axis of a scale transformation.

transform: scaleX(-1);

I did consider doing a more elaborate animation, but…discretion is the better part of valor as they say. It quickly became clear that going down that path was leading further and further away from the inspiration point. Clean, crisp and iconic, thank you very much.

Tangentially, I do like the concept of a matched pair, burning together. Makes me think of my wife. ♥️

Need a light? You can download them here.

And the dark humor that sustains us.

Back in 2016, a video game came out that was somewhat prescient — Tom Clancy’s The Division. Maybe prescience is easy when the humanity is so predictably set on self-destruction, glorifies ignorance and revels in ineptitude. Sorry, that’s a bit harsh, I know.

It’s a great game and my wife and I pre-ordered it mostly due to it being based in NYC. A triple A game with highly detailed, open world maps of Manhattan? And a Tom Clancy based story? Yes, please.

And it’s a great game! We had a ton of fun running around all the neighborhoods we know and love. My wife would join friends online and point out our apartment or my office. We note differences between fiction and reality as we worked through missions.

And that’s where this little guy comes in. I think it was in the Brooklyn section of the game and in an alley, it was a large graffiti on the wall. This was also when I was drawing the symbols from Destiny ultimately leading to the Symbology project. Naturally, I was immediately drawn to this cool illustration, a symbol of sorts, a smiling wink and a nod, a thumb in the eye of authority in the face of disaster.

Flash forward to 2020 and there’s an actual global pandemic. And there are refrigerator trucks on the streets of Manhattan trying to hold all the dead bodies. Sorry, that’s a bit harsh, I know.

As it wasn’t part of the Symbology project, this illustration never had a home. Now it does. If you need a symbol for a bit of “screw you,” please take it. We need more signs. We need more humor. We need more ways to laugh at our despair.

You can download a version in JPG and SVG format here.

This post is a little diversion into a bit of recent inspiration (and fandom) that my wife brought to my attention — the amazing world of Stingray!

Now for those of you like me, who have never heard of Stingray, it’s a British science fiction children’s TV show from the 1960’s. Not only was it her favorite TV show as a child, which was reason enough to start my investigation, but the fact that I had never even heard of it was confounding and as I started looking, a whole new world opened up. The world of Supermarionation.

This series has tweaked all my kid/adult hot buttons — aliens, typography, a retro vibe, pseudo-futuristic gadgets like “hydrophones”, a pulse pounding soundtrack and some truly creative production tricks. Let’s take a look at a few of these and you’ll see why I’m obsessed.

In terms of design, the logo screams vintage 1960s cool. So much so, that I whipped up a quick redraw of it (above) just for fun. It’s cartoony, fun and has that swing so prevalent during that decade. Even before watching the show, I saw this logo and was immediately hooked.

Musically, it’s all about excitement. Drums in the lead, with big horns, the soundtrack (and corresponding in-episode tracks) are a character unto themselves, often times taking the place of dialog to communicate the story. It’s the kind of theme song that serves as a siren for seven year olds (like me). You hear it and you come running because “anything can happen in the next half hour”.

Digging behind the scenes, I found the production of the show is super creative and quirky. They film the puppets in between an aquarium and painted backgrounds to give the underwater shots more realism. The puppets and models stay dry, but little fish still swim around. Same with things like special effects like explosions. There’s a bunch of little things you’ll notice, like adding sweat to the puppets faces for dramatic effect and when they need a closeup of hands — they’ll switch to a shot of actual human hands.

Luckily, you can now watch the series on Amazon Prime and I’m working my way through all 40 episodes.

But wait! There’s more!

I went ahead and created a couple of iOS ringtones for those of you (like me) who appreciate a little excitement in your iPhone.

And I’m not the only Stingray fan out here. If you want to add more cool to your font library, you can download the Anderson Stingray font.

“Stand by for action!”

Union Square, NYC

Red Hook, Brooklyn

Another geisha in Brooklyn. I believe it’s the same artist who created these two pieces.

Red Hook, Brooklyn