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

Pasted up on the base of a light pole, framed by silver steel, is this hand painted flower. Quick and dirty, alive with the rush of creation. The magenta center dot is the only thing that feels considered. The rest is all organic and emotion. The sticker addition is also quite respectful. It’s not a signature, but a comment, in context, but not the focus of the conversation.

Midtown, Manhattan.

Oh to be nineteen again. Oh wait, nineteen and angry? Maybe not. There’s a bit of 1950’s nostalgia in this character. The line work in the eyes and nose remind me of those “learn to draw comics” advertisements with a reference guide to facial expressions. I do appreciate the stylized (and accessible!) numeral one as well. There’s a fluidity to the numbers that is almost an italic form.

Midtown, Manhattan.

I’m not sure if it’s a New York thing or not, but I love that small business owners have artists paint the sides of their trucks with absolutely outlandish graffiti scenes. These panel trucks roam the city with just some hand applied vinyl lettering on the cab doors with the business name, address and phone number. (No website, never.) Meanwhile, the rest of the truck is completely covered in an unrelated piece of art. I like to imagine a giant nigh time parking lot filled with a gallery of panel truck masterpieces quietly sleeping. Upon waking they bump and stumble out to spread across the city, double parking for brief moments of revelation.

As to why this phenomenon occurs, I’m guessing this the old school tactic of embracing the “vandals” rather than fighting them. Just give the kids a chance already. And honestly, it’s a much better form of advertising. Home made, personal and unique.

Midtown, Manhattan.

A message from the street to add a bit of perspective to our lives. Is the message trite? Perhaps, but a reminder is often necessary when the world narrows our vision. The traffic cone adds a new level of context as “under construction” is often a permanent condition.

Chelsea, Manhattan.

A wonderful example of taking cues from the environment to tell a story. Seeing what others may miss and expressing it in a new way. We tell our stories every day and leave them open to interpretation. I’m choosing to see this one as inspirational. Don’t give up!

Chelsea, Manhattan.

A small worn sticker found stuck to a railing on the west side. It’s almost invisible with the silver metallic base on the metal railing. The blend kind of echoes the all lowercase sans serif lettering and rounded corners. It is unimposing in its presentation and quietly powerful in its message.

Midtown, Manhattan.

Here’s a piece I’ve been trying to capture for a while, but it’s been obscured. They finally moved all the construction materials and it was revealed in the spring sun. Striking colors with the gradient and dots adding detail and personality. Plus the highlights adding shine make it a top notch piece of work.

Midtown, Manhattan.

Found this beautiful old paste up from Dylan Egon that strikes so many chords with me. Which chords? It’s black and white with simple, clean lines. It’s full of small symbolic details that many will not understand. It’s political and cultural. It’s provocative, but the edge is offset by her calm expression. The Latin on the gun seems to have gotten overlapped when the sheet was applied, but it reads, “silentium est aureum” or “silence is golden”. This is a piece I wish I had drawn and now, I wish was on my wall.

Based on the handwritten graffiti, it also strikes a reaction in others as well.

Midtown, Manhattan.

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.