Среда, 13.11.2019, 23:42
ЗАРАБОТОК В СЕТИ
WWW.ZARABOTKII.RU
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
...
Меню сайта
вечная ссылка
Статьи
Вебмастеру
Форма входа
Мини чат
200
Новости сайта
Block content
Помощь сайту
Помогите сайту!
ЯндексЯндекс. ДеньгиХочу такую же кнопку
Наш опрос
Оцените мой сайт
Всего ответов: 62
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс.Метрика
Рейтинг@Mail.ru
Поиск
 Как сделать кнопку на сайте ссылкой

Как сделать кнопку на сайте ссылкой

Существует два подхода к созданию кнопки на сайте в виде ссылки. Рассмотрим подробно каждый из них.

1. Кнопка в виде изображения

Это самый простой подход к созданию кнопки в виде ссылки на сайте. Для этого Вам понадобится всего лишь найти подходящую картинку для кнопки. Например, картинка с Вашей кнопкой называется button.jpg. Тогда, для создания ссылки код должен быть следующим:

<body>

...

<a href="URL"><img src="button.jpg"></a>

...

</body>

Вот во что он превращается на странице сайта:

Это самый элементарный вариант. Советую прочитать про тег a и тег img, чтобы настроить кнопку именно под Ваши требования.

Кстати, для создания изображений для кнопок есть специальный сайт: http://dabuttonfactory.com/. Здесь можно бесплатно создать кнопку по Вашему вкусу (задать стиль, выбрать изображение, написать подходящий текст и т.п.).

2. Кнопка с помощью HTML тега form

Этот вариант также является одним из методов создания кнопки в виде ссылки. Приведу элементарный пример кнопки созданной с помощью тега form и input:

<body>

...

<form>

<input type="button" value="Просто кнопка"

onclick="javascript:window.location='URL1'"/>

<input type="button" value="Ещё одна кнопка"

onclick="javascript:window.location='URL2'"/>

</form>

...

</body>

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

 

Вместо URL1 и URL2 надо написать адреса страниц, куда необходимо осуществить переход. Если Вы хотите, чтобы ссылки открывались в новых вкладках (аналог атрибута target="_blank" у тега a), то вместо onclick="javascript:window.location='...'" нужно прописать onclick="javascript:window.open='...'" (заменить location на open).

Я почти уверен, что Вам захочется оформить кнопку как-то по другому (под дизайн своего сайта). Для этого введем класс btn:

<head>

...

<style>

.btn { //Задание общего стиля для кнопки

height:30px;

border-color:#c2e254 #9bb838 #9bb838 #c2e254;

border-style:solid;

border-width:1px;

background:#c2e254; cursor:pointer;

}

.btn:hover { //Стиль кнопки при новедении на него курсора

border-color:#FFCC66 #FFFF99 #FFFF99 #FFCC66;

border-style:solid;

border-width:1px;

background:#FFFF99;

}

.btn:focus { //Стиль кнопки, когда она в фокусе

background:#ddd;

border-color:#ddd #333 #333 #ddd;

border-style:solid; border-width:1px;

}

.btn:active { //Стиль кнопки при нажатии

background:#ff0000;

border-color:#ddd #333 #333 #ddd;

border-style:solid; border-width:1px; }

</style> ... </head> <body> ... <form>

<input type="button" value="Просто кнопка" class="btn"

onclick="javascript:window.location='URL1'"/>

<input type="button" value="Ещё одна кнопка" class="btn" onclick="javascript:window.location='URL2'"/>

</form>

...

</body>

После этого кнопка будет выглядеть следующим образом на странице:

... ...

 

...

Мы разобрали 2 подхода к решению задачи создания кнопки на сайте. Обычно все используют первый подход, поскольку заморачиваться с input никто не хочет. Более подробно об стилях можно прочитать в статье: тег style.

Читайте также:
• Как добавить счетчик посещений на сайт
• Как сделать выпадающие меню на CSS
• Как сделать иконку для сайта
• Как сделать подсказку для ссылок
• Как увеличивать изображение на сайте
• Как добавить социальные кнопки на сайт

Перейти в каталог html уроков и советов

 

Copyright MyCorp © 2019
Календарь
«  Ноябрь 2019  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Архив записей
Валюта

Яндекс кошелек
Если не видно картинку, то включите ява скрипт и обновите страницу код с картинки →

Обмен валют currex.ru и spasibo.kz

...
Друзья сайта
Модная - женская одежда Заработок в интернете
Бесплатные программы ПК Гороскоп на сегодня
Заработок на рекламе
Заработок в сети
Гламур
Салон красоты
Работа на себя
Работа на дому
Мои услуги
BitCoin
вечная ссылка
Купить ссылку здесь за руб.
Поставить к себе на сайт
Так.ру
Сайт создан в системе uCoz