Oh No, Not Another Collection of Buttons

Marin Schultz
2 min readMay 13, 2021
Buttons are everywhere, here are some design tips and tricks.

While countless examples of buttons exist on the internet, there is rarely discussion of what actually makes a good button. Buttons can be can often be far more creative than we often make them to be, and a great website make use of a real interaction mechanism, and not just a simple button.

So, what makes a good button?

Interactivity — This goes without saying, but buttons are there for interaction. Make the button do something when you hover and click. Users will have a bias towards hover effects because it requires less commitment to trigger the effect. They also can encourage the user to click the button by visually stimulating and rewarding them.

Visual effects — Draw the user in and surprise them. Every effect should have a purpose, whether semantic, aesthetic, interactive, etc.

Make it themed — Make the button do what it says it will — visually, or link the semantic content of the visual effect to the theme of the website. This button gives the impression of paint, bubbles, bubblegum, or anything fluid.

Contrasting or non-rectangular forms and shapes — Rectangular buttons are EVERYWHERE. Shake it up a little by contrasting shapes, using irregular patterns, and non-rectangular forms when appropriate. This will draw attention to your design, encouraging interactivity and possibly even relieving the user, just a little.

A circular button from Dixonandmoe.com

Skeuomorphism — In an increasingly digital world, people crave material interaction. While digital electronics and AR won’t quite be filling this gap anytime soon, we can give users some comfort with designs that mimic the effects of interacting with a physical button.

Finally, balance the visual complexity of your page — Complex buttons work better on minimalist pages and complex pages need simpler buttons.

--

--

Marin Schultz

Mathematician, Roboticist and Web Developer. Internationally awarded high school researcher in science. Thinks about the social implications of technology.