Напевно, жоден сайт не обійдеться безвідсильні на інші свої сторінки кнопок. Всім хочеться привернути саме на свій сайт увагу, і при цьому використовуються найрізноманітніші засоби. У веб-дизайні до їх числа відносять оформлення кнопок, які відрізняються за різними параметрами - і за розмірами, і за формою, і по ефектах і так далі.
Кнопки CSS найбільш зручні. За миті їх стиль можна повністю змінити. І, звичайно, це дає додаткові можливості для оформлення сайту в цілому.
Для початку, щоб не було плутанини і непорозумінь, варто розібратися в деяких поняттях.
CSS, що означає в перекладі "каскадні таблиці стилів", на сьогоднішній день є однією з основних технологій в інтернеті. Без цієї мови навряд чи обійдеться хоч один сайт.
CSS-код - це інструкції для браузерів, що містять інформацію, як відображати елементи на сторінці і де це робити.
Зручно зберігати такі інструкції в окремому файлі, що має розширення .css. З іншого боку, можна їх помістити і на початку html-документа.
Кнопка, або графічний елемент для навігаціїсайту, повинна привертати до себе увагу, щоб відвідувач побачив, що за нею ховається цікава йому інформація, і крім цього, на неї захотілося б натиснути. Коли вона досить яскрава і помітна, то її обов'язково помітять. Така кнопка може спонукати відвідувачів, наприклад, залишити свій відгук на сайті, або відправити заявку, підписатися на цікаву розсилку, ну і, звичайно, просто перевести на запитуваний користувачем розділ сайту.
Кнопки бувають статичні, анімовані, динамічні, зі звуком і без нього.
Їх можна спеціально створювати, наприклад, в фотошопі, і завантажувати на сайт зображення, а можна легко і швидко придумати їх в CSS.
Зробити такі кнопки дуже просто. Великою перевагою їх застосування є те, що їх в будь-який момент, буквально за пару секунд, можна змінити до невпізнання.
Як відомо, у кнопок є три положення:
Повною мірою кнопки точно з'являться в такихбраузерах, як Firefox, Safari, Opera, Chrome. У той же час в Internet Explorer 9 кнопки не зможуть відобразитися в повній мірі. Наприклад, заокруглення кутів, тінь тексту і обведення навколо кнопки не будуть видні тут через те, що такі властивості не підтримуються цим браузером. Проте, в цілому CSS-кнопки для сайту виглядають гідно в цій версії браузера. В Internet Explorer 8 і інших версіях нижче восьмий у кнопки не буде видна об'ємність, але, в той же час, збережеться видимість градієнтів.
Якщо порівняти кнопку у вигляді зображення і кнопкуCSS, то різниця місця на сервері буде абсолютно несуттєвою. Але кнопки CSS зменшать кількість запитів до сервера, а ось це вже буде явною перевагою в порівнянні з кнопкою у вигляді зображення.
Виходить, що навіть якщо підтримка деякихвластивостей CSS в браузерах Internet Explorer і відсутня, то такі кнопки все одно будуть виглядати більш виграшними в порівнянні з простими зображеннями, тому що єдине, чого втратять користувачі в Internet Exporer, так це бачити естетичність сучасних технологій по веб-дизайну. Але це зовсім несуттєвий недолік.
Для кожного положення задається свій стиль. Ці стилі прописуються в спеціальному файлі .css або між тегами head в самій сторінці сайту.
Між тегами body записується код:
де
id = "button2" тут означає ім'я, що привласнюється кнопці,
href = "гіперпосилання" тут дається безпосередня посилання на необхідний документ,
ТЕКСТ - друкується текст, який буде відображатися на кнопці.
1. Стиль кнопки CSS записується окремо в документі або в самій сторінці:
2. Спочатку записуються кнопки CSS, коли вони знаходяться в спокої:
3. Далі записуються параметри, відповідні кнопці, коли на неї наводять курсор. Якщо в даному випадку змінюється лише колір і заливка, то і в стилі все залишається колишнім, крім кольору і заливки:
4. І останній параметр стосується положення кнопки, коли натискається на неї курсор. Часто в таких випадках змінюється лише мінімум, наприклад, колір, як і в цьому випадку:
Для створення кнопок можна використовувати градієнт.Найкраще спочатку кнопку намалювати в будь-якому графічному редакторі, наприклад, фотошопі, щоб точно знати, яка вона вийде в результаті. Якщо використовувати фотошоп, то в ньому спочатку вже є якісь градієнти, але додатково можна завантажити ще й інші, такі, які хотіли б, щоб вийшли на сайті.
Експериментуючи з CSS-кодом і змінюючи різні параметри, є можливість змінювати CSS красиві кнопки, і шляхом підбору, домагатися бажаного результату.
Цими параметрами є:
- колір тексту на кнопці;
- розмір тексту і кнопки;
- колір градієнта кнопки;
- радіус кутів кнопки;
- і колір її обведення.
Власне кажучи, можна спокійно, без страху, експериментувати і вибирати найкращий варіант. Незважаючи на невелику кількість параметрів, можна створити дуже різноманітні за своїм стилем кнопки.
