CSS бутони. Ползи. Стилове. естетика

Вероятно никой сайт няма да направи, без да се позовава на други страници с бутони. Всеки иска да привлече вниманието към сайта си и в същото време да използва различни средства. В уеб дизайна те включват дизайн на бутони, които се различават по различни параметри - по размер, форма, ефект и т.н.

Бутоните CSS са най-удобни. За момент техният стил може да бъде напълно променен. И, разбира се, това дава допълнителни възможности за проектиране на обекта като цяло.

За начало, за да няма объркване и недоразумения, е необходимо да се разберат някои понятия.

CSS, какво е това

CSS, което означава "каскадни стилови листове" в превод, днес е една от основните технологии в интернет. Без този език е малко вероятно да управлява поне един сайт.

CSS кодът е инструкции за браузъри, които съдържат информация за това как да се показват обектите на страницата и къде да я направите.

Удобно е да се съхраняват такива инструкции в отделен файл с разширение .css. От друга страна, можете да ги поставите в началото на html документа.

Бутонът на сайта. Какво е това?

Бутонът или графичният елемент за навигация в даден сайт трябва да привличат вниманието, така че посетителят да види, че информацията, която го интересува, се крие зад него и освен това би искала да го натисне. Когато е достатъчно ярък и виден, ще бъде забелязано. Такъв бутон може да принуди посетителите, например, да оставят отзивите си на сайта или да изпратят заявление, да се абонират за интересен бюлетин и, разбира се, просто да преведат до секцията на сайта, поискана от потребителя.

Бутоните са статични, анимирани, динамични, със и без звук.

Те могат да бъдат специално създадени, например, във Photoshop и да качите изображение на сайта и лесно и бързо можете да ги изведете в CSS.

CSS бутони

Направете тези бутони е много проста. Голямо предимство на приложението им е, че те могат да се променят безпричинно по всяко време, буквално след няколко секунди.

Както знаете, бутоните имат три позиции:

• почивка, когато нищо не е направено с него, а просто сърфиране в страницата;
• позиция, с курсора върху него;
• и активиране при натискане.

Бутоните ще бъдат напълно показвани в такива браузъри като Firefox, Safari, Opera, Chrome. В същото време в Internet Explorer 9 бутоните не могат да се показват в пълна степен. Например ъглите на ъглите, сянката на текста и удара около бутона няма да се виждат тук, защото тези свойства не се поддържат от този браузър. Въпреки това, като цяло CSS-бутони за сайта изглеждат прилични в тази версия на браузъра. В Internet Explorer 8 и други версии под осмата, бутонът няма да покаже насипно състояние, но същевременно видимостта на градиентите остава.

Ако сравнявате бутона под формата на изображение и бутона CSS, разликата в местоположението на сървъра ще бъде напълно незначителна. Но бутоните CSS ще намалят броя на заявките до сървъра, но това вече ще е ясно предимство пред бутона под формата на изображение.

Оказва се, че дори и ако подкрепата на някои CSS имоти в Internet Explorer и не, тези бутони ще продължат да изглеждат по-печеливш от прости изображения, защото единственото нещо, което ще загубят потребители в този браузър, така че да го види естетиката на модерните технологии в Интернет -Проектиране. Но това е абсолютно незначително недостатък.

За всяка позиция посочвате своя собствен стил. Тези стилове са написани в специален .css файл или между главни тагове в страницата на самия сайт.

Поставете бутона на сайта

Между тялото на маркерите е написан код:

където

id = "button2" тук означава името, присвоено на бутона,

href = "HYPERLINK" тук има директна връзка към необходимия документ,

TEXT - отпечатва текста, който ще се показва на бутона.

Бутон стилове

1. Стилът на бутона CSS се записва отделно в документа или в самата страница:

2. Бутоните CSS първоначално са написани, когато са в покой:

3. След това се записват параметрите, съответстващи на бутона, когато курсорът е насочен към него. Ако в този случай се промени само цветът и пълнежът, тогава в стила всичко остава същото, с изключение на цвета и пълнежа:

4. И последният параметър се отнася до позицията на бутона, когато курсорът е натиснат върху него. Често в такива случаи само минимални промени, например цвят, както в този случай:

CSS - красиви бутони

Можете да използвате градиент за създаване на бутони. Най-добрият начин е първо да начертаете бутон в графичен редактор, например в Photoshop, за да знаете точно какво ще свърши. Ако използвате Photoshop, то вече има някои наклони, но освен това можете да изтеглите повече и други, като например, които искате да получите на сайта.

Опитвайки се с CSS кода и променяйки различни параметри, е възможно да промените красивите бутони на CSS и като изберете, за да постигнете желания резултат.

Тези параметри са:

- цветът на текста на бутона;

- размер на текста и бутоните;

- цветни градиентни бутони;

- радиус на ъглите на бутона;

- и цвета на удара му.

Строго погледнато, можете спокойно, без страх, да експериментирате и да изберете най-добрия вариант. Въпреки малък брой параметри можете да създадете много разнообразни бутони за стил.