Golden rules of successful CSS button

Today, there are a thousand ways to create a button, to understand their essence, you only need to spend some time looking at the work site dribbble.com . Most of these examples are very similar to each other, but from time to time come across such a button, the creation of which have spent a little more attention, time and effort. advantage of the wonderful options CSS3, we can create an elegant and stylish buttons without much effort (including older browsers of course). Whether you're creating the button directly in the CSS or use special tools to create them, you should always think carefully about how your button will look like in the context of the Web site.

You can always download a ready set of buttons that some very kind person put it to the network. But why not sit down and think about what you can create something more original. I present you the 10 simple points, which I always take into account when creating the button. I'm not going to share ideas on how to use layer styles in Photoshop, but tell on the basic principles that will help you in your projects.

A. Relevance Brand

It is important that your buttons fit for the context. This could mean a deliberate choice of colors and graphic style and use of logo design to create a button. Perhaps, your logo has a form that can be used effectively.

The shape, color, texture, patterns and fonts offer a great field for creativity.

If the interface used mostly flat colors, the big shiny button, a la Apple - not the best option. If possible, use the logo design to create an interface, use the appropriate forms, colors, and other forms of jewelry.

2. Match content

Remember that you need a start not only on the logo, but also on the interface as a whole. It happens that the buttons can be buttons, for example, only on smartphones, or Web applications, but perhaps on a website they can come up with a replacement.

Three. enough contrast?

With so many interface design, inspired by the style of Apple, the button can be lost among the other elements of the UI, losing its purpose. Try to experiment with colors, sizes, margins and fonts, so the buttons stand out in the interface.

Important keys need to be contrasted.

4. rounded or shaped buttons?

If the interface has too many buttons with rounded corners may have to change their shape, to make them, for example, circular. This will give a contrast that will attract users' attention and urge them to push the button.

Five. Hide minor elements


You should always keep in mind that minor items do not have much to stand out from all interfaces. For example, menu items, controllers or different runners may be at equal angles (of radius), but with different shadows, borders, gradients, etc.

6. Stroke and the boundary

The majority of buttons there are something like a border or stroke. If the button is darker than the background, the stroke color to be darker than the color of a button. If on the contrary, ie, background is dark, the stroke should be darker than the background. In my opinion, this rule - the most important thing when it comes to borders and strokes.

7. Be careful with soft shadows

For a long time I am motivated by the "Law of Shadows." This law states that any shadow work most effectively when the item is lighter than its background. If the element is darker than its background, the shade should be used carefully.

Eight. icons to help you

Use small icons (for example, arrows) helps the user to predict what will happen after clicking on the button.
For example, the arrow to the right may mean that the user moves to the next page or even leaving it. Arrow down - there will be a drop-down menu.

9. Remember the primary, secondary and tertiary elements

If you create an interface with a variety of different functions, it is important to establish a visual language, defining the primary, secondary and tertiary styles.
Save for the primary keys are the strongest colors, and the decreasing importance of the buttons, use the weaker. Also do not forget to reduce the size of the button, white space, text size and levels embossing to reduce the visual weight of the buttons.

A variety of styles of buttons may play into the hands of

10. Specify the state of the button

For some it may seem obvious, but it is always desirable to indicate the current state of the button. User chooses to have an idea at what stage is currently in the button. This can be done with the help of these parameters CSS, like shadows, borders and gradients.

Conclusion

There is nothing wrong with using prefabricated elements UI, it is obvious that it saves a lot of time. Can even a situation that you have found the perfect item that fits you at 100% (and totally free). Nevertheless, I think it is worth remembering the basic rules to create buttons that will ensure successful and effective interface. PS I am pleased to accept in a personal comment about the translation. Thank you!