1 reply [Last post]
AntonioP's picture
Last seen: 7 years 36 weeks ago
Timezone: GMT+1
Joined: 2013-02-12
Posts: 1
Points: 2

Dear web UI designers and developers,

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:


Here is grey picture with circle inside. Six buttons are placed around the circle. Each button is pointing on the circle with line. Here is button in detail:


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!

Hugo's picture
Last seen: 5 years 41 weeks ago
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hi there I don't want to come

Hi there I don't want to come off as rude or abrupt but settings challenges on a help forum is not considered good form, those of us that help others less skilled are not in need of any challenges we have our own work and plenty enough challenges to deal with Smile

Your request is rather involved and detailed as there isn't really a notion of actual issues that we can help with I doubt we can take this very far. If, however, you have some example work in progress you would care to share we can take a look and help with any issues you might be having.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me