How to create subtle hover & press state — for buttons 🔥
Courtesy of @bazen.agency
This tip saved us a lot of troubles when we were creating deliverables for developers.
You can just without thinking, apply this to any color. And if you have a dark theme you can use Screen mode instead of Multiply.
This is a bit different post from one that we posted on @ui_gradient profile as we thought we can explain this a little better after the feedback we got in comments.
Let us know if this is clear enough that you can apply it to the next project.
Hover and press states are important, so a user can have a feeling that everything is ok while they’re using a website. They should be very subtle because their only purpose is to indicate interaction, not to drive attention to it.
How to choose color for hover & press states
Duplicate button and set blending mode on the upper one to multiply 20% and 40%.
What multiply does it just removes white from color, so just changes its value.
Exceptions to rule for dark theme
We just change Multiply with Screen blending mode to remove black from color. Sometimes hover state doesn’t have to be subtle.
Bonus — 4 tools that may be useful in your designer way:
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.