Demo and tutorial on how to create an interactive, two-key keyboard with pure CSS
Lately, I’ve become obsessed with trying to see what I can create using only HTML and CSS (besides websites of course). Since playing with the concept of faking 3D elements, I wanted to circle back around to an older CodePen I created: a mini, interactive “undo” keyboard.
See it in action
Below you can view a live demo of the mini keyboard itself. This demo is nothing special, but takes design inspiration from Apple’s magic keyboards (if that wasn’t already obvious).
So now that we have seen what we plan to build, let’s break down the process of creating this stupid, fun project!
The core skeleton of this project is very simple, since the keyboard consists of only 2 interactive buttons on top of a basic base element:
“Z” letter button
Here is where all the magic happens. Let’s break these elements into their own sections, starting with the base styling:
We then tackle the basic keyboard base element:
Next, we target all shared styles between the 2 keyboard buttons to avoid repeating ourselves later on:
All that remains is to add the custom styling for each independent button:
Taking it further
You could easily improve upon this concept by rendering an entire interactive keyboard, if you so desired. But this is maybe something I would tackle at a later date when I have a little more free time 😉 For now, a simple mini “undo” keyboard is fun enough to play with.