Кнопки для сайта

Кнопки сайта

Кнопки сайта - это графическое оформление ссылки, её "наряд", так сказать. Оригинальные, красивые кнопки делают сайт более привлекательным, "оживляют" его.

Сначала покажу самые простые способы, как сделать кнопку для сайта. Дальше будет чуть посложнее, но интереснее.

Любой рисунок можно легко сделать кнопкой, если поместить его в "якорь" ссылки. Для этого необходимы лишь знания HTML.

**К примеру, рисунок слева - кнопка. (Кликнув по ней, попадёте на страницу, посвящённую технике создания простых кнопок для сайта. Откроется в новом окне.)

* * *

Вообще, желая создать кнопку для сайта, можно найти много интересных способов, сделать это.
Меня же, более всего интересовали простые способы создания кнопок для сайта HTML, без использования каких-либо скриптов.

Нажмите на нижнюю кнопку. Узнаете, как подключать видео и аудио к страницам сайта.

* * *

Кликнув по следующей, познакомитесь с ещё одной интересной техникой для создания оригинальных, красивых кнопок.

* * *

А вот такие крохотные кнопочки, на первый взгляд никчемные, на самом деле позволяют легко создавать простые и эффективные фотогалереи и галереи рисунков на сайте.

Одна кнопочка:

И ещё 3 кнопочки:

- НО! -

На странице "Галерея" (откроется в новом окне) сможете посмотреть, как из таких крохотных, разрозненных кнопок создаются целые галереи рисунков, фотогалереи.

* * *

Дальше покажу, какие замечательные возможности открываются перед теми, кто овладел ещё и использованием CSS.
Это возможность создавать динамические кнопки для своих сайтов.

Динамические кнопки

Динамическими называются кнопки, которые реагируют изменением своего внешнего вида на какие-либо действия посетителя.

Подробнее познакомиться с технологиями, применёнными для их создания, сможете на странице "Псевдоселекторы" (откроется в новом окне).

Вот первая кнопка. Подключена к БОЛЬШОМУ разделу "Фотошоп".

* * *

Ещё одна кнопка, с загрузчиком(!). То есть, пока будет загружаться красивая картинка, на ней отображаются стрелки - символ загрузки.

* * *

И ещё динамическая кнопка. Правда, уже "хитрая".
Дело в том, что для её создания применил элементы JavaScript. НО! Совсем чуть-чуть, и прописал их, как атрибуты тэга напрямую в коде HTML (даже без файла CSS!).

Наведите курсор мыши на кнопку - она изменится. Кликните - откроется рисунок. Снова наведёте - появится надпись. Снова кликните - исчезнет. Короче, пробуйте!

Для возвращения кнопки в исходное состояние, страницу нужно перезагрузить.

У последнего показанного метода есть хорошее преимущество: изменения происходят мгновенно! Браузеру не нужно открывать новую страницу.

* * *

Заключение

Показал здесь, как легко создаются кнопки для сайта. Просто. Без использования каких-либо сложных скриптов.
Разумеется, этим не исчерпываются возможности HTML+CSS.

На странице "Галерея" посмотрите практическое применение этих базовых технологий интернета: галереи рисунков, фотогалереи (откроется в новом окне).

Желающие узнать, как ещё можно сделать кнопку на сайт, посетите страницу о создании шапок в программе "Фотошоп": "Шапка для сайта" (откроется в новом окне).

И наверняка тех, кого интересуют кнопоки, заинтересует и создание различных простых индикаторов для сайта. Об этом узнаете здесь: "Индикаторы" (в новом окне).

Ну, и напоследок.

Хоть этот подраздел я посвятил теме создания простых кнопок для сайта, всё же нужно показать и другие, пусть не самые простые, зато чрезвычайно(!) функциональные.

Это кнопки, с помощью которых создаются навигаторы, называемые МЕГА-меню. Кода и скрипта в них всякого "выше крыши", но ... ... ... .
Короче, смотрите сами: "jQuery МЕГА-меню" (откроется в новом окне).

ВВЕРХ