Sass Blend Mode Buttons

These buttons are pure HTML/CSS and use blend modes (like Overlay) from Photoshop. Using SASS, one color gets passed in and all the effects come from that color. The button is also built to handle lighter button colors, reversing the color of the icon and adjusting the effects.

The icon comes from the amazing, semantic Symbolset font. Check it out if you haven't already.

I built this because so many buttons look muddied when you just combine a base color with black or white. These buttons are pulling styles directly from the Layer Styles palette in Photoshop so colors remain pure and vibrant.

So, what do you think?

Posted on Jul 16, 2012
Ken Woodworth
Designing the web since '00.

More by Ken Woodworth

View profile