adxy logo

← writings

Interacting with the button

Button is one of the main components of almost every UI. It drives most of the call-to-actions on pretty much all UIs, but still it's sometimes a little under-looked.

Today, let's see some of the basics and advanced stuff you can take care of while the user interacts with the button to make the UX better & delightful.

Basics

1. Cursor

Every button should have cursor "pointer". There's a reason why some unique cursors were added, to distinguish between the actions of different UI elements.

Bad, cursor not set to pointer.
Good, cursor set to pointer.

2. Hover State

When your button is hovered, it should visually indicate that its being interacted with, this makes it easier for the user to figure out if their pointer is at the correct place, specially good for small buttons.

You can do it by changing border color, background color, shadows or scaling the button slightly up.

Bad, no unique hover state
Good, border updates on hover.

← writings