Кнопки CSS. Переваги. Стилі. Естетичність

Напевно, жоден сайт не обійдеться без відсильні на інші свої сторінки кнопок. Усім хочеться залучити саме на свій сайт увагу, і при цьому використовуються найрізноманітніші засоби. У веб-дизайні до їх числа відносять оформлення кнопок, які відрізняються за різними параметрами - і за розмірами, і за формою, і по ефектах і так далі.

Кнопки CSS найбільш зручні. За миті їх стиль можна повністю змінити. І, звичайно, це дає додаткові можливості для оформлення сайту в цілому.

Для початку, щоб не було плутанини і непорозумінь, варто розібратися в деяких поняттях.

CSS, що це

CSS, що означає в перекладі "каскадні таблиці стилів", на сьогоднішній день є однією з основних технологій в інтернеті. Без цієї мови навряд чи обійдеться хоч один сайт.

CSS-код - це інструкції для браузерів, що містять інформацію, як відображати елементи на сторінці і де це робити.

Зручно зберігати такі інструкції в окремому файлі, що має розширення .css. З іншого боку, можна їх помістити і на початку html-документа.

Кнопка на сайт. Яка вона буває

Кнопка, або графічний елемент для навігації сайту, повинна привертати до себе увагу, щоб відвідувач побачив, що за нею ховається його цікавить інформація, і крім цього, на неї захотілося б натиснути. Коли вона досить яскрава і помітна, то її обов'язково помітять. Така кнопка може спонукати відвідувачів, наприклад, залишити свій відгук на сайті, або відправити заявку, підписатися на цікаву розсилку, ну і, звичайно, просто перевести на запитуваний користувачем розділ сайту.

Кнопки бувають статичні, анімовані, динамічні, зі звуком і без нього.

Їх можна спеціально створювати, наприклад, в фотошопі, і завантажувати на сайт зображення, а можна легко і швидко придумати їх в CSS.

Кнопки 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-кодом і змінюючи різні параметри, є можливість змінювати CSS красиві кнопки, і шляхом підбору, домагатися бажаного результату.

Цими параметрами служать:

- колір тексту на кнопке-

- розмір тексту і кнопки-

- колір градієнта кнопки-

- радіус кутів кнопки-

- і колір її обведення.

Власне кажучи, можна спокійно, без страху, експериментувати і вибирати найкращий варіант. Незважаючи на невелику кількість параметрів, можна створити дуже різноманітні за своїм стилем кнопки.