Style an isometric button that presses in

Edge lines deserve more attention than they usually get. A thin, slightly darker line along the bottom edges grounds each block, and a lighter line on the top edge suggests a highlight. Using currentColor for those lines means a single colour change on the wrapper restyles every outline in the scene.

Choosing the three face colours

Readers often ask whether isometric art is still a trend or already a cliché. Our answer is that the style is a tool, like a chart type. It is excellent for explaining structure and relationships, and it is a poor choice for emotion or narrative. Used for the right job, it never really goes out of date.

1. Start with a checkbox

   Use a real input type="checkbox" so the control works with a keyboard and screen readers.

2. Draw the track

   Style the label as a tilted track with a darker right face.

3. Slide the block

   Move the block with translate when the input is checked, and skip the transition for reduced motion.

The code

We prototype every scene on paper first. A sheet of triangle-grid paper, a soft pencil and ten minutes are enough to find out whether a composition works. It is far cheaper to erase a pencil line than to rewrite a dozen nested transforms, and the sketch doubles as documentation when someone asks why a block sits where it does.

Hover effects on isometric blocks work best when they follow the same rules as the static scene. Lift a block along its vertical axis, deepen its shadow on the floor, and leave the other blocks alone. Moving a block sideways, or changing its angle, breaks the projection and makes the scene feel unstable.

Performance is rarely a problem for one hero cube, but a scene with fifty transformed blocks is a different story. Each block may become its own compositing layer, and every layer costs memory. Open the Layers panel before you ship and count them. If the number surprises you, flatten the static parts into a single SVG.

Custom properties make isometric CSS far easier to maintain. Instead of hard-coding sizes, we define a single unit on the scene wrapper and multiply it everywhere else. Changing the unit rescales the whole illustration, keeps the proportions intact and means a phone layout needs one media query instead of twenty.

Colour contrast still applies to illustrations that carry meaning. A bar chart drawn as blocks needs enough contrast between the bars and the floor, and labels on the faces need the same contrast as body text. Decorative scenes have more freedom, but we still avoid pale blocks on a pale background.

Isometric drawing keeps every parallel line parallel. There is no horizon and no vanishing point, so a block at the back of the scene is exactly as large as one at the front. That sounds like a limitation, but it is the reason the style works so well for diagrams: you can measure anything, compare anything, and line things up without fighting perspective.

Workshops taught us more than any tutorial. Watching people fold paper cubes and then rebuild them in CSS showed exactly where the mental model breaks: the order of rotations, the origin of each face, and the moment a block turns inside out. Most of our tutorials now start with the paper version for that reason.

const sorted = tiles.toSorted((a, b) => (a.x + a.y) - (b.x + b.y));for (const tile of sorted) {	scene.append(tile.element);}

Colours used

When to switch to SVG

Responsive isometric scenes need a plan for narrow screens. Sometimes the answer is to scale everything down with clamp(), and sometimes it is to hide secondary blocks entirely. What rarely works is letting the scene overflow sideways, which makes the page scroll horizontally and feels broken on a phone.

Grids are the backbone of every scene we draw. A single grid unit decides tile width, block height and spacing, which is why our illustrations line up even when three different people made them. When something looks off, the first thing we check is whether one element quietly ignored the grid.

Three colours carry the whole illusion. The top face is the lightest because it faces the sky, the left face sits in the middle, and the right face is the darkest. Keep those three roles consistent across the page and readers stop seeing flat shapes. Break the rule once, with a dark top on a single block, and the entire scene looks wrong.