Season 2 of the Overtime podcast is here! Listen to the first episode with Meg Robichaud now.
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?
L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2017 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.