Website Button Design – Types and The Characteristics

Deb Dey — December 22, 2017 Follow @debdulaldey

Buttons are everywhere and they are big deal in the sphere of web design. Can you image a website without a button? I hope not because we use them everywhere. They are on the Contact Us form, user registration form, login form and so on and so forth.

Buttons capture our attention easily and which is why they so prominent role in the design and development process of a website. Therefore, it is no wonder why so many modern day website designers spending their days and night to come up with creative and cool buttons.

Since the web designing industry is undergoing a massive transformation, we are seeing a wide variety of buttons on display. However, going crazy with button can hurt the bottom-line of a website badly because if the users find them appalling, they will not click on them and that means, your website is going to lose a good number of business leads.

But before we go into the styling details, let’s have a look at certain characterizes that make a button useful to the users –

Size

All it boils down to one thing that is size. The button should not be too large as it would look ridiculous and at the same time, it should not be too small that users have to learn the art of archery to be able to click on it. Its size should be convenient and compact. Since people are switching between devices and as an increasing number of websites are getting morphed into responsive websites, we need to make sure that the buttons are large enough for people to interact with them easily on a mobile device. Want to know more about touch targets and the ideal size of a button, you might want to read this guide by MIT Touch Lab.

Focus

There will be time, when you will have to use multiple buttons. When users have to choose between multiple options available, the desired option should be displayed prominently. Say for example, if you are displaying a pop up in your website asking users to get registered to the newsletter of your website, there should be two options available to the users – register button and Ignore Button. As obvious, you would not be making the mistake of making the Ignore button look more prominent. The rule of thumb is to jazz up the look and feel of the register Button or any other button that you want your visitors to click on.

It Should Look Like A Button

We understand that you are a creative professional but you need to understand that not everyone around maybe qualified enough to understand and appreciate your creativity especially when it comes to something simple and basic like Button. People feel flabbergasted when they have to deal with something radically different. So, the button should have a strange structure like – a Triangular Button may sound great but people will eventually find it extremely irritating. So, learn to keep your creative impulse in check when it comes to designing a simple button for a website.

So, now we all have got acquainted with the main characteristics of button and that means, now it is the time to explore different types of buttons available on the web –

Glossy Buttons

Glossy Buttons were all the rage in the early days of the web. People were crazy about them and web designers had to spend considerable amount of time to create the glossy effect. The best thing about glossy buttons is that they look stunning and they help capture the attention of the users. But somehow the taste of the peoplechanged and the designers suddenly grew a distaste for this button style and it just got vanished from the web. You might can bump on these types of glossy buttons even today but they have become endangered species.

Round Button

Of late, you will find mostly flat rectangular button but not so long ago, we could easily spot round buttons. They look nice and add a certain level of uniqueness to the design without requiring the designer to go extreme with the shape of the button. Use of random shape for a button is not going to help you make your visitors feel encouraged to click on them.

Flat Button

The main characteristics of a flat button are – they are simple, they have single color and simple border. Flat button is actually an outcome of the flat designing trend that is making an inroad into the sphere of web design lately. Usually, these flat button have a dark color border associated with them and the size of the border usually vary between 1px to 5px depending the creative needs of the project.

Ghost Buttons

There is not much difference between ghost button and flat button and which is why people tend to confuse them with one another. What is a Ghost Button by the way? Well, it is simple a flat button without any background. The text gets surrounded by a border and it kinda looks pretty cool. Ghost button has gained prominence with the rise of popularity of large sized background image. The impact is quite powerful.

Gradient Buttons

Some web designers are still using gradients to come up with creative and awesome buttons to be used as Call to Action in a website. The trick is to use it subtly so that people can find them quite interesting rather than getting overwhelmed. You should not be using two different colors while designing the button as this would make it look cringeworthily most of the time. And you would certainly not be tagged as old-school if you dare to use gradient button for your next web designing project because the idea is still embraced quite a lot of web designers around the world.

Icon Button

Icon buttons are quite popular these days as they have some interesting advantages over others. Apart from the texts that are being used with Icon buttons, the icons also help the users understand what the button actually does. For example, if you include a Phone icon in a button along with some texts, it will make it easier for people to understand what the button does – in this case, it will probably redirect the users to the Contact Us section of the website.

(70)