WE CREATE BRANDS PEOPLE L♥VE
Share

How To Create Subtle Hover & Press State — For Buttons


Tegra - January 27, 2020 - 0 comments

How to create subtle hover & press state — for buttons

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.

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  Normal State Hover State Press State

How to choose color for hover & press states

Instructions: Duplicate button and set blending mode on the upper one to multiply 20% and 40%.

Instructions:

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.

What multiply does it just removes white from color, so just changes its value.

Exceptions to rule for dark theme 
We just change Multipy with Screen blending mode to remove black from color. 
Sometimes hover state doesn't have to be subtle.

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.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *