Developer's Blog

[Design TIPS] How to make buttons with borders that do not blur


Today, I want to introduce a handy tip for creating buttons.
One thing that is very important when creating buttons to be used in many different situations is to make sure that [the border of the button does not blur in different colour backgrounds].

When you create a pale-coloured button, you probably also use a pale-colour for the border.
If you place a button with a pale-coloured border in a light background it will be displayed nicely, but in a dark background or a colour close to the colour of the border…

Can you see how the edges have become blurred?
When the border between the background and button becomes blurry, the button loses a 3D-like(the feeling that it can be clicked) sense.
Even though the width of the border may be a mere 1px, it plays a vital function in how we perceive the button it surrounds to function.

How to make [a border that does not blur when used in different coloured backgrounds]
In order to prevent blurring of borders, draw a border using a dark colour, and adjust the transparency to appear beautifully in pale backgrounds.

If you use a dark blue border with a non-transparency of 40%, the button will display as below in backgrounds except white.

This will provide a crisp border that works well with the background colour.
It maybe just a small tip, but creating a habit of doing this helps prevent having to change the border to suit different background colours after you have finished making a button.
In addition to using this tip for creating buttons, you can also use it on icons and various other parts of design so please feel free to give it a go!

Please join us on Facebook for Sleipnir for Windows!

Please follow us on Twitter!

Facebook Comments