Button Design Inspiration, Ideas, Types & How to Make Button for Website

Buttons are one of the most essential components of any user interface design. Attractive button design is useful and essential to trigger click or even sales for any company. These buttons also lead the users smoothly through the website or mobile app. Owing to the attraction that a button adds to any page, special attention is paid to design these buttons with great care whether these buttons are on a simple app or whether we talk of web button designs. There are many principles, tips and tricks to design a perfect button. This article will give you an insight into all essentials that a designer must know for button design or web button design for that matter. This article will also focus on button design ideas and button design inspiration to help you create unique and effective buttons.

Further Reading on CGfrog

What is a Button?

The term ‘button’, also known as the push or the command button is a graphical representation of a control which paves a way for the user to set off a command or an event. This may include options like search, Confirm button etc. The sole aim of creating a button is performing an action fast at just a click. Buttons are a common element of an interaction design.

1. A Button Anatomy

Creating buttons for an app or a website is like creating assets for them, which is often a procedural process. A button is made-up of three main components, which are:

Container
Icon
Text Label

2. The Shape of a Button

A button should look like a button!
The most common question that every designer asks is regarding the shape of a button.

A button is typically rectangular in shape. In some cases, it is also round. However, there is no thumb rule as such. But what is important is that being a designer, you should be able to make a button look like a button. Buttons are simple with just one word written on them, but they may also be descriptive in some cases. By clicking on these buttons using a mouse pointer, the action written on the button can be performed. One can be super creative while creating a button, but the only thing to keep in mind is that a user should be able to identify each button well. A safe bet is though to make buttons square or square with rounded corners. The button design largely depends on the kind or type of the app or website also. The most commonly used and most familiar button shape is – rectangle.

It is important to have visual identifiability of buttons so that users understand that a particular element is a button. This will increase the clickability of it. Irrespective of the shape of the button, a designer must keep in mind that all buttons in a particular UI should be uniform and look alike.

3. Common Uses of Buttons

The following are the uses of a button:

Buttons often change graphically and look like a mechanical button.
For some buttons, we have to click just once to finish an action.
We have to click some buttons more than once to achieve the desired result.
A button also shows a tooltip when we move the pointer on the button.

4. Common Attributes of a Button

Buttons stand for the action that it performs as a part of the UI. They are the common and the simplest element of interaction between the user and the UI. Though they look like the simplest element, they are packed with numerous attributes. These attributes include the margin, the padding, the border, the border radius, the font style, font size etc. The following picture depicts the common attributes of a button.

The simplest button comprises of many important attributes.

Some Common Examples of a Button Are:

OK button – Confirms an action and closes the current window.

Cancel button – Cancels an action and closes the current window.

Close button – Closes a window after finishing the action performed.

Submit button – Submits a form or application after all the required fields are fulfilled.

Delete button – This button enables one to remove any unwanted files or folders.

Tips for Successful Button Design

1. Button Shape and Designs

Use familiar designs for your buttons

Always use familiar design trends for your button

The shape of a button is important as a button should be easily recognizable and not get merged with the background. A user actually has to make a lot of efforts to decode a button. Here are a few examples of buttons that are familiar to most users:

Among all those examples, the “Filled button with shadows” design is the clearest for users. When users see a dimensionality of an object, they instantly know that it’s something they can press.

2. Design Consistency

A designer should keep in mind the consistency of a button while designing one. The button design should be according to the User Interface and should be in a similar theme.

3. Drop Shadow and Highlights

Shadows are important hints that a designer gives to the users which help them identify the clickable objects on a screen. If a button casts a shadow, the user tends to understand that it is an interactive element on the page. This shadow also gives a raised look to the button which makes it distinguishable.

Drop Shadow can make an element stand out against the background and content whereas Highlight accentuates it

If a button casts a subtle shadow, users tend to understand that the element is interactive.

4. Use the Icon to Label Buttons

The user should be able to judge looking at the button as to what function it will perform. This also makes the button identifiable and the user can spot it at a glance. The icon on the button also tells the user about the function it will perform.

Use the icons to label the button and make it noticeable

5. Size and Padding

A button smaller than a finger will not be clickable. So, it is important to decide the right size and the correct finger pad size should be followed. But, when a user uses a mouse, the size of these buttons can be slightly reduced.

Touch targets which are smaller in size are hard to use as compared to the large ones. Finger-friendly buttons for mobile users is preferable

6. Don’t Forget About the Whitespace.

The designer must keep in mind the whitespace on the screen. When the user sees the dimensionality of an object, they instantly think that this element is clickable, Thus, a button design should be done carefully.

7. Size of Buttons

A very significant point to remember in button design is that the size of the buttons should be according to the screen, whether designing for a mobile phone or whether it is web button design. The button should be neither too large nor too small. It should be just the right size!!

Size of Buttons – Buttons should be according to the screen sizes.

8. Avoid Using Too Many Buttons

A designer must prioritize the most important actions and make limited buttons. Too many buttons and actions on the screen will ultimately lead to zero action. Presence of too many buttons also confuses the user.

Do not use too many buttons on one screen

9. Provide Visual or Audio Feedback on Interaction

The UI should respond to the users’ action on a button. If a user clicks on some button, the UI, based on the appropriateness must respond audio or visually. This will ensure proper feedback as well as completion of the action.

The progress indicator on this button is demonstrating the current state of action. Image Credit: Colin Garven

10. Apply Contrasting Colors

A button should be identifiable and should not merge with the background. The color should be balanced, it should neither be too bright nor too dull.

Have you ever accidentally clicked on a wrong button?!

Users tend to make wrong decisions when they do not know what to do. So it is important to guide the users in the right direction. Some models prompt the users to act without making anything clear.

The clear color contrast between different buttons is what guides users to choose the right one. If the user is not able to spot the action clearly, his task slows down. It also sometimes leads to the selection of wrong actions which ruins their task. So, find just the appropriate color for your buttons!

Positive, Neutral and Negative Actions

There are three types of actions that every button falls under:

Positive – This button enables to make changes, send or add information.
Neutral – This button makes no change as such, it takes users back a screen (e.g. Cancel).
Negative – This button helps to delete, reset or block information.

The Psychology of Colors

Find the appropriate color for your buttons and make them more useful and effective:

Red: Power, passion, love, (negative);
Green:Growth, money, environment (positive);
Blue: Trust, peace, loyalty, safety, (positive);
Black: Formality, luxury, sophistication, (neutral);
Grey: disabled;
Brown: Outdoors, food, earth;
Orange: Confidence, cheerfulness, friendliness;
Purple: Royalty, mystery, spirituality;

Positive Actions Need the Highest Contrast

When Negative Actions Have Highest Contrast

A user must be able to identify between positive, neutral and negative action

Neutral Actions Have the Lowest Contrast

Proper use of contrast will make the button look active otherwise a user might take it as inactive

11. A Thumb Rule – Just Keep it Simple

A button shouldn’t look too busy and one shouldn’t overdo a button. It is always good to have some sort of similarity between the buttons on a single UI. Too complicated buttons are heavy and they do not look good. The more simple, the better it looks!

Follow KISS Rule – Keep it really simple

Dos and Don’ts of Button Design

DOs	DON’Ts
Make buttons look like buttons.	Do not label buttons randomly.
Label buttons exactly what they do for users.	Do not put buttons where the users can’t find them.
The users should be able to interact with the buttons easily.	Do not make buttons of the same UI differently.
Follow uniformity and consistency while Button Design for a single UI.	Don’t put too many buttons on one page.
Place buttons where users can find them easily or expect them to be.	Ambiguous button labels and placement leads to delayed actions and so they should be avoided.
Put buttons in a correct order.	Do not use images as buttons.
Make the important button look like it is important.	If there is no requirement as such, do not put buttons unnecessarily.

Button Design Inspirations

Some cool examples of Button designs

Brilliant example explaining the importance of “Positive Action”

Beautiful button design showing download

Example of delete button with Popup confirmation window

Example of Delete button with icons and labels to depict the action

CSS Button Hover Examples From CodePen

Five Different CSS Button Hover Effects

See the Pen CSS button hover effects by Magda (@woolandcotton) on CodePen.

Designed by Magda

Three Simple CSS Button Hover Effects

See the Pen Three Simple CSS Button Hover Effects by Dronca Raul (@rauldronca) on CodePen.

Designed by Dronca Raul

Layered Button Hover Effects

See the Pen Layered Button by Dronca Raul (@rauldronca) on CodePen.

Designed by Dronca Raul

Contact Button Hover Effect

See the Pen Contact button by Alberto Jerez (@ajerez) on CodePen.

Designed by Alberto Jerez

Button Bubble Effect

See the Pen Button bubble effect by Adrien Grsmto (@Grsmto) on CodePen.

Designed by Adrien Grsmto

Conclusion

Buttons are a very significant part of a smooth user experience. It is thus, important to take care of the essentials of a button design. As designers, when you design your own buttons we recommend you to start with the buttons that you think are the most important. Follow your heart and mind while designing a button. Don’t stop until you are satisfied with your creation. More practice in web button designs will lead your way to perfection for sure. And whatever you are designing, always keep recognition and clarity as your prime objectives.

We hope that this post on Button Design is helpful for you. Do share with us your views and ideas on web button design. Comment below to let us know which one is your favorite button design inspiration and also, let us know your button design ideas.