Як зробити кнопку для сайту?

Дивіться відео

Як зробити кнопку для сайту?

Кнопка на сайті - атрибут необязательний- без нього цілком можна обійтися, роблячи прості текстові посилання або звичайні меню у вигляді списку. Але витончена кнопка прикрасить сторінку, виділить меню, змусить звернути увагу на, наприклад, пропозиція внести сторінку в закладки. Головне, щоб її дизайн не суперечив загальним стилем і змістом ресурсу.

Як зробити кнопку за допомогою html

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

Як зробити кнопки скриптами, ми розглянемо як-небудь наступного разу. Зараз зупинимося на простому варіанті - html. Припустимо, потрібно оформити кнопками меню сайту: «Головна», «Про компанію», «Контакти» і т.п. Потрібні кнопки з відповідним текстом і посиланнями, ведучими на зазначені сторінки.

Проста посилання пишеться так: Текст посилання. Виглядати ця конструкція буде так: Текст посилання. Можна змінити шрифт. Наприклад, так: Текст посилання. В результаті текст посилання став червоним, шрифт збільшився на одиницю. # Ff0000 - це позначення кольору. Коди різних кольорів можна подивитися в інтернеті. Наприклад, ось тут маленька таблиця основних кольорів, які можна вказувати не кодами, а англійськими словами. Повна таблиця кольорів і кодів знаходиться тут.

Використовуємо для кнопки CSS

Щоб не прописувати код близько кожного посилання, створимо стиль посилального тексту. Для цього в «голові» сайту, де-небудь між тегами і , вставляємо теги, а між ними пишемо, який текст в посиланнях ми хочемо бачити. Робиться це так:

A {size: + 1- COLOR: # 0000ff}

Але це звичайне посилання, хоч і оформлена нетрадиційно. Як же зробити кнопку? Для цього напишемо текст посилання на тлі, відмінному від загального фону сторінки. Нехай кнопка буде сірого кольору, код кольору # 999999. Додаємо атрибут «фон» - BACKGROUND. А підкреслення посилань краще прибрати. Значить, додаємо ще один атрибут: TEXT-DECORATION: none.

A {BACKGROUND: # 999999- size: + 1- COLOR: # ff0000- TEXT-DECORATION: none}

При бажанні можна навколо фону зробити рамку шириною в 1 піксель чорного кольору - атрибут BORDER: 1px solid # 000000. Отримуємо:

A {BORDER: 1px solid # 000000- BACKGROUND: # 999999- size: + 1- COLOR: # ff0000- TEXT-DECORATION: none}

Тепер у нас посилання більшим шрифтом червоного кольору на сірому фоні в чорній рамці. Дуже схоже на кнопку.

«Натискаємо» кнопка

Якщо хочете, щоб виникла ілюзія натискає кнопку, потрібно прописати стилі посилання при наведенні на неї курсора і при натисканні на неї. Нехай при наведений курсорі кнопка стане світліше, а при натисканні темніше і з більш широкою рамкою. Наша конструкція ускладниться:

A {BACKGROUND: # 999999- size: + 1- BORDER: 1px solid # 000000- COLOR: # ff0000- TEXT-DECORATION: none}

A: hover {BACKGROUND: # CCCCCC- BORDER: 1px solid # 000000- COLOR: # ff0000- TEXT-DECORATION: none}

A: active {BACKGROUND: # 666666- BORDER: 2px; COLOR: # ff0000}

Тепер ми маємо «натискаємо» кнопку. Щоб переконатися в цьому, скопіюйте в блокнот нашу «голову», потім між тегами і напишіть своє посилання:

A {BACKGROUND: # 999999- size: + 1- BORDER: 1px solid # 000000- COLOR: # ff0000- TEXT-DECORATION: none}

A: hover {BACKGROUND: # CCCCCC- BORDER: 1px solid # 000000- COLOR: # ff0000- TEXT-DECORATION: none}

A: active {BACKGROUND: # 666666- BORDER: 2px; COLOR: # ff0000}

Текст посилання

Збережіть файл з розширенням .html. Відкрийте його в будь-якому браузері, перевірте, як працює кнопка.