I'm working on a site that will have a vertical main menu made up of chunky different coloured buttons like this:
This is more or less fine, but if you look at the styling (it's all in that html page at the moment) you'll see that each button has it's own ID, meaning lots of repetitive styling in the final page (there'll be at least five buttons in this menu, each a different colour).
I tried doing this by creating Classes to style the different coloured buttons but couldn't get it how I wanted. I could set only the text as a link but then the icon (background image) would change before the text as the mouse pointer moved across the div to the text, and this looked a bit rubbish:
Besides, the whole button should be a link, not just the text, and I couldn't get the Classes I created to work when I set the <a> tag outside the <div> tag.
The question is then, is there a way to get the results of my first link using classes and less styling code?