DEV Community

Cover image for Interactive SNES Controller in HTML + CSS
Alvaro Montoro
Alvaro Montoro

Posted on

Interactive SNES Controller in HTML + CSS

This past weekend, I created a demo using 3D CSS: an interactive SNES controller. The idea was to get a "realistic" version of the controller, coding it entirely with HTML and CSS.

The result are on this CodePen demo (link to full screen):

And it is interactive! Click on the top circle to change the camera angle, and press the buttons and joystick to see them going down and up.

One goal was to make it work using a mouse, keyboard, or a gamepad connected to the browser (I had to add a pinch of JS for that 😉), and it works! If you plug a game controller into your computer, you will see the buttons pressed as you press on the physical controller. The Gamepad API controls that, and I also used a library I developed to make it easier to handle (the Gamepad API is a bit different to other Web APIs.)

I have to admit that the 3D is a bit "fake." I am using actual 3D CSS and rotating/translating things in the three dimensions, but I am limiting the angles so I don't have to deal with the actual depth (something that Amit Sheen does greatly on his demos, but that I didn't want to deal with this time 😳).

The joystick/axis was challenging (the cross shape with rounded corners was a pain to do), but it was fun. And I got to play with transform-origin, so only the side that is being pressed goes down.

Top comments (4)

erinposting profile image
Erin Bensinger

This is amazing, Alvaro! Well done!

(Anyone else immediately try ⬆️⬇️⬆️⬇️⬅️➡️⬅️➡️🅱️🅰️ START on this controller?)

alvaromontoro profile image
Alvaro Montoro

I will add it as an Easter egg later tonight ☺️

amircahyadi profile image


andrewbaisden profile image
Andrew Baisden

Wow this is seriously cool!