I have another tricky puzzle for you to solve. It would be challenge for you and you will help to make one nice project come true. I will briefly explain what I want from you.
Assume this sketch as a final product:
Button consist of 3 different shapes. Inside first one will be placed icon, inside others some short text. The edge of the button should be limited by the geometry of shapes. User should know that by transformation of cursor. On hover the button should zoom in a bit. The line and dot preferably shouldn’t be a part of the button or background image and shouldn’t react on hover effect.
Also the whole menu should be scalable to fit different resolutions.
I would think for two ways of doing this buttons. First one is to make a whole button out of images, or as a second solution to make it from shapes with CSS. The lines probably should be also made as image or as CSS shape. And then everything should be assembled on top of the gray background picture using “absolute position” in CSS.
I would be glad to get any kind of solutions for this puzzle! Thank you for your time!
My point is -even if a few things can be a little tricky- I don’t see anything that would require a huge amount of CSS skills except when it comes to optimize the way you position elements on a circle (see link above).
From there, there are 2 options:
* Either you haven’t started coding this, and my advice would be to do it cause I don’t think anybody here will do it for you,
* Or you have started but you happen to be stuck somewhere, so the best to do would be to show us your code in order to help us help you.