Just a button, how hard can it be ?

Do the details right.

The real gummy bear (*´꒳`*)

Do you know what a button is ? Some people said something that can click. Or Some said a component that has an action after clicking it. Either way, when people see a button, they should know that what action will be triggered after they clicked it.

Click triggers action. Simple. But how to design a button ?

Have a look of the following,

So which one do you think is a good button ?

Sadly, I would say, none of the above. Each one of them has some issues with it. For example,

  1. Only the text is clickable, the user will think that the button doesn’t work when the user “accidentally” clicked on the coloured area instead of the text.
  2. It doesn’t have a proper mouse cursor displayed. It’s fine for mobile, but not for desktop.
  3. Icons might not be known for everyone around the world. You might need to ensure your target audience is on the same page.
  4. Apart from being a rectangle with a text label, you agree that it doesn’t feel like button right ?

You might ask, “how should a proper button look like then ?”

Try the button below.

This is a more proper designed button. It has,

  1. the mouse-over colour
  2. a clear text label
  3. a proper sizing and spacing
  4. a proper mouse-over cursor showed
  5. enough contrast from the background of the page

In addition, try to take advantage of the HTML tags to show a more structured code. Like <button> tag, you would expect a button, and a <a> tag would be words with action, or it would be applying action to non-clickable components, like images.

Every tag also has default styles which should be helpful when designing a new web page.

Thanks for reading! If you like this article, hit the button below to show your support and also click Follow button for latest updates (*´꒳`*)
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.