Re: Layout for interactive infographic

[Kitty Giraudel]

> Button consist of 3 different shapes.

Nothing hard here. 3 boxes with border-radius and background-color.

> Inside first one will be placed icon, inside others some short text.

Use an icon-font.

> The edge of the button should be limited by the geometry of shapes.

That seems obvious.

> User should know that by transformation of cursor.

Either you’re dealing with anchor tags as wrappers, or you only have to use cursor: pointer;.

> On hover the button should zoom in a bit.

Here comes transform: scale(1.1).

> The line and dot preferably shouldn’t be a part of the button or background image and shouldn’t react on hover effect.

This would probably be the trickiest part. The easiest way is to use background images. You could also do it with pure CSS but it would probably be more complicated. Or you could use JS to calculate coordinates.

> Also the whole menu should be scalable to fit different resolutions.

Media queries to the rescue!

So once again, where are you stuck?