Probably, no site can do without buttons linking to its other pages. Everyone wants to draw attention to their site, and at the same time, a variety of means are used. In web design, they include the design of buttons that differ in various parameters - both in size, in shape, and in effects, and so on.
CSS buttons are most convenient. In moments 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 worth understanding some concepts.
CSS what is it
CSS, which means "cascading style sheets" in translation, is today one of the main technologies on the Internet. At least one site is unlikely to do without this language.
CSS code is instructions for browsers containing information on how to display elements on a page and where to do it.
It is convenient to store such instructions in a separate file with the extension .css. On the other hand, you can put them at the beginning of the html-document.
Button on the site. What is it like
A button, or graphic element for navigating a site, should attract attention, so that the visitor sees that information that interests him is hidden behind it, and in addition, I would like to click on it. When it is bright and visible enough, they will definitely notice it. Such a button can induce visitors, for example, leave your review on the site, or send a request, subscribe to an interesting newsletter, and, of course, simply transfer to the section of the site requested by the user.
Buttons are static, animated, dynamic, with and without sound.
They can be specially created, for example, in Photoshop, and uploaded to the site image, or you can easily and quickly come up with them in CSS.
CSS Buttons
Making these buttons is very simple. The great advantage of their application is that they can be changed beyond recognition at any moment, literally in a couple of seconds.
As you know, buttons have three positions:
- peace when they do nothing with her, but simply browse the page;
- position with the cursor over it;
- and activation when pressed.
The buttons will be fully displayed exactly in browsers such as Firefox, Safari, Opera, Chrome. At the same time, in Internet Explorer 9, the buttons cannot be displayed fully. For example, the rounding of corners, the shadow of the text and the stroke around the button will not be visible here due to the fact that such properties are not supported by this browser. However, in general, the 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 see the volume, but at the same time, the visibility of the gradients will remain.
If we compare the button in the form of an image and the CSS button, then the difference in space on the server will be completely insignificant. But CSS buttons will reduce the number of requests to the server, and 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 advantageous than simple images, because the only thing users lose in Internet Exporer is to see the aesthetics of modern technologies on the web design. But this is a completely insignificant flaw.
Each position has its own style. These styles are written in a special .css file or between the head tags in the site page itself.
Button Place on Site
Between the body tags, the code is written:
Where
id = ”button2” here means the name assigned to the button,
href = ”HYPERLINK” here provides a direct link to the required document,
TEXT - the text is printed, which will be displayed on the button.
Button Styles
1. The CSS button style is written separately in the document or in the page itself:
2. First, the CSS buttons are written when they are at rest:
3. Next, the parameters corresponding to the button are written when the cursor is over it. If in this case only the color and fill changes, then in the style everything remains the same, except for color and fill:
4. And the last parameter relates to 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’s best to first draw a button in a graphic editor, for example, Photoshop, to know exactly what it will turn out in the end. If you use Photoshop, then it initially already has some gradients, but in addition you can also download others, such as you would like to get on the site.
By experimenting with CSS code and changing various parameters, it is possible to change the CSS beautiful buttons, and by selecting, achieve the desired result.
These parameters are:
- color of the text on the button;
- text size and buttons;
- button gradient color;
- radius of the button corners;
- and the color of her stroke.
Actually, you can safely, without fear, experiment and choose the best option. Despite the small number of parameters, you can create very diverse buttons in their style.