CSS Buttons. Benefits. Styles. Aesthetics

Probably, no site will not do without referring to other pages of buttons. Everyone wants to attract attention to their site, and at the same time using a variety of means. In web design, they include the design of buttons that differ in various parameters - in size, shape, effect and so on.

The CSS buttons are the most convenient. For a moment their style can be completely changed. And, of course, this provides additional opportunities for the design of the site as a whole.

To begin with, so that there is no confusion and misunderstanding, it is necessary to understand some concepts.

CSS what is it

CSS, which means "cascading style sheets" in translation, is currently one of the main technologies on the Internet. Without this language is unlikely to manage at least one site.

CSS code is instructions for browsers that contain information on how to display items on a page and where to do it.

It is convenient to store such instructions in a separate file that has the .css extension. On the other hand, you can put them in the beginning of the html-document.

The button on the site. What is it like?

A button, or a graphic element for navigating a site, should attract attention so that the visitor sees that the information that interests him is hiding behind it, and besides that, she would like to press it. When it is sufficiently bright and prominent, it will be noticed. Such a button can induce visitors, for example, to leave their feedback on the site, or to send an application, subscribe to an interesting newsletter, and, of course, simply translate to the requested section of the site.

Buttons are static, animated, dynamic, with and without sound.

They can be specially created, for example, in Photoshop, and upload an image to the site, and you can easily and quickly come up with them in CSS.

CSS Buttons

Make these buttons is very simple. A great advantage of their application is that they can be changed beyond recognition at any time, literally in a couple of seconds.

As you know, the buttons have three positions:

• Rest, when nothing is done with it, but simply browsing the page;
• Position, with the cursor on it;
• And activation when pressed.

The buttons will be fully displayed in such browsers as Firefox, Safari, Opera, Chrome. At the same time, in Internet Explorer 9, the buttons can not be displayed to the fullest. For example, rounding corners, text shadow and stroke around a button will not be visible here because such properties are not supported by this browser. Nevertheless, in general, CSS-buttons for the site look decent in this version of the browser. In Internet Explorer 8 and other versions below the eighth, the button will not show the bulk, but at the same time, the visibility of the gradients will remain.

If you compare the button in the form of an image and the CSS button, then the difference in the location on the server will be completely insignificant. But the CSS buttons will reduce the number of requests to the server, but this will already be a clear advantage compared to the button in the form of an image.

It turns out that even if there is no support for some CSS properties in Internet Explorer browsers, such buttons will still look more winning compared to simple images, because the only thing that Internet Explorer users will lose is to see the aesthetics of modern technologies on the web -design. But this is absolutely insignificant drawback.

For each position, you specify your own style. These styles are written in a special .css file or between the head tags in the page of the site.

Place a button on the site

Between the tags body is written code:

Where

Id = "button2" here means the name assigned to the button,

Href = http: // site / article / 175988 /% E2% 80% 9D% D0% 93% D0% 98% D0% 9F% D0% 95% D0% A0% D0% A1% D0% A1% D0% AB % D0% 9B% D0% 9A% D0% 90% E2% 80% 9D here is a direct reference to the required document,

TEXT - prints the text that will be displayed on the button.

Button styles

1. The style of the CSS button is recorded separately in the document or in the page itself:

2. The CSS buttons are initially written when they are at rest:

3. Then the parameters corresponding to the button are written, when the cursor is pointed at it. If in this case only the color and the fill are changed, then in the style everything remains the same, except for the color and fill:

4. And the last parameter concerns the position of the button when the cursor is pressed on it. Often in such cases, only a minimum changes, for example, color, as in this case:

CSS - beautiful buttons

You can use a gradient to create buttons. It is best to first draw a button in a graphic editor, for example, Photoshop, to know exactly what it will end up with. If you use Photoshop, then it initially already has some gradients, but in addition you can download more and others, such as would like to get on the site.

Experimenting with CSS-code and changing various parameters, it is possible to change the CSS beautiful buttons, and by selecting, to achieve the desired result.

These parameters are:

- the color of the text on the button;

- size of text and buttons;

- the gradient color of the button;

- the radius of the corners of the button;

- and the color of its stroke.

Strictly speaking, you can calmly, without fear, experiment and choose the best option. Despite a small number of parameters, you can create a very diverse in its style buttons.