webdev

Generating Consistent Hover Effects Programmatically

Submitted by Josh on

A while back, I had a project in which I had a series of buttons that needed to be styled in a rainbow of candy colors, for a list of items that all lead to different spots in the same content hierarchy. The design mockups I was given for the project were detailed but did not appear to be internally consistent from color to color; the base colors were chosen from a brand guide, but the guide did not provide any detail for how to lighten or darken the colors for user interaction states. I started by developing CSS to match the mockups, but the problem kept gnawing at me.