Красивые кнопки для сайта.

Урок. Вставка красивых кнопок на сайт.

Серия дополнительных уроков.

Доброго времени суток!

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

Вот пример того, что мы будем делать (наведи на неё мышью):

Для того, чтобы сделать такую кнопку нам понадобится:

1) Воспользуемся буржуйским бесплатным сервисом по созданию красивых надписей и кнопок.

Вот так он выглядит.

Для этого переходите по ссылке ниже на сам сервис:

http://cooltext.com/Logos

2) Выбераем на сайте в верхнем меню Buttons и жмём.

Нам предоставляется выбор внешнего вида будущей кнопки.

Выбор внешнего вида кнопки

3) Теперь выбираем понравившийся вид и жмём по нему.

Я выбрал для примера вот эту:

Перед нами открываются таблички с данными цветов, шрифтов и размеров, которые
мы будем менять под свой вкус.

Данные для замены

Вот что я поменял:

Text (Текст на кнопке: Весёлое видео)

Font (Выбрал др шрифт: Use Goodfish Font, цвет текста на кнопке: Color #000000, и размер текста: 25)

Color 1 (Изменил основной цвет кнопки на: #E9E90E, меняется перетаскиванием мышки)

Mouse Over (Внешний вид при наведении: Sport)

4) Нажимаем внизу кнопку создать:

Вот что у меня получилось:

Результат

Сервис создал нам 2 изображения нашей кнопочки:

Верхнее это основное изображение которое показывается сразу.

Среднее изображение это то, что показывается при наведении мышью.

Нижнее изображение: Рабочий пример.

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

Вот мой код для вставки на сайт:

Вот сама кнопка которую я делал.

У нас есть код для вставки и сами изображения кнопки, наши действия дальше.

Скачиваем 2 изображения это: основное, и то которое подменяется при наведении к себе на компьютер, а затем загружаем к себе на сайт в меню работа с файлами в корневую папку.

Теперь дорабатываем код:

Добавляем действие на данный код полученый на сервисе (изображение кнопки), ставим его в ссылку, куда мы будем переходить при нажатии.

<a href="http://infopodsolnux.ru/" target="_blank">Вставляем сюда код взятый на сервисе</a>

Пояснения:

href="http://infopodsolnux.ru/" Сайт куда ведёт данная ссылка при нажатии.
У меня сайт куда ведёт ссылка: http://infopodsolnux.ru/

target="_blank" - означает открывать в новом окне браузера, можно не писать, тогда будет открываться на этой же странице.

Вот код который у меня получился:

<a href="http://infopodsolnux.ru/" target="_blank"><img src="cooltext478305270.png" onmouseover="this.src='cooltext478305270MouseOver.png';" onmouseout="this.src='cooltext478305270.png';" /></a>

Внимание!

Но это не всё, если мы код оставим таким как есть, то кнопка покажется и будет работать только на главной странице вашего сайта, в добавок вокруг неё появиться синяя рамочка.

Вот пример:

Если вам так нравится, и кнопка для главной страницы скажем персональное меню из набора кнопок, то оставляйте так.

Для того, чтобы все браузеры отображали одинаково и не было рамки вокруг кнопки, нам в код нужно поставить border="0" это нулевой стиль для рамки.

Вставлять будем в код сервиса после вывода первого изображения:

Рамка пропадёт.

Для того, чтобы кнопка работала на той странице куда вы её хотите вставить вам потребуется изменить относительные пути для показа изображений (подробнее об абсолютных и относительных ссылках смотрите здесь)

Чтобы правильно прописать пути показа изображений на вложенной странице вашего сайта Вам потребуется:

1) Опубликовать ту страницу, где размещаете кнопку.

2) Скопировать из строки браузера абсолютную ссылку на вашу страницу.

Вот моя скопированная ссылка http://you-sayt.narod.ru/uroki/krasivie-knopki.html

Отрезаем от неё домен http://you-sayt.narod.ru , основное название сайта

Получаем: /uroki/krasivie-knopki.html

Отрезаем хвост: krasivie-knopki.html, ту страницу на которой находимся (где устанавливаем кнопку)

Получаем: /uroki/ это, остаток ссылки имя вложений папки (у вас может и несколько вложений остаться, не пугайтесь)

Добавляем впереди /uroki/ ставим две точки вот так ../uroki/ -это для того чтобы браузер осуществлял переход на уровень в вверх к названию сайта.

Теперь берём то, что у нас осталось и подставляем в код впереди имени изображения.

У вас должно получиться так:

Вот теперь данный код полностью готов к установке именно на ту страницу для которой мы его готовили.

Надеюсь у вас получиться не хуже, чем у меня!

Вы можете пойти дальше и сделать скажем красивую постраничную навигацию по вашему сайту объединив 2 урока в один. Это Постраничная навигация по сайту (урок см здесь) и этот урок по созданию красивых кнопок для сайта.

Вот немного посидел и сделал пример постраничной навигации
по сайту с кнопками.

Навигация по урокам.

Полезный сайтик по html коду.

Удачи в САЙТА СТРОЕНИИ!

У Вас множество вопросов в создании своего первого сайта?

Наполнение?
Оптимизация?
Раскрутка?

Вам нужна квалифицированная помощь в этих вопросах!

Предлагаю Вам платные консультации.

Подробнее пишите мне через контакты.

У нас на сайте можно подписаться на обучающий видеокурс "Делаем Сайт Самостоятельно На Яндекс Народ"
Вы узнаете: Как создать сайт на народе. Изучите создание сайта на народе в конструкторе сайтов.
Научитесь, как сделать сайт бесплатно и быстро.