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

В этой инструкции показано, как создать свою кнопку.

• Обычная кнопка
• Кнопка с фоновым изображением
• Кнопка на CSS
• Ваша кнопка на других сайтах
• Установка кнопки на сайт

Обычная кнопка

В качестве обычной кнопки используются HTML теги input или button. Однако, для этих тегов нет атрибута href, который мог бы направить пользователя на другую страницу. Поэтому им часто добавляют атрибут onclick с указанием ссылки, по которой нужно перейти:

<input type="button" value="Нажмите здесь!" onclick="location.href='любая ссылка'">

Выглядит это следующим образом:

Кнопка с фоновым изображением

Если у вас есть изображение кнопки, то его можно использовать в обычной ссылке, например так:

<a href="любая ссылка" target="_blank"><img src="ссылка на изображение"></a>

Выглядит это следующим образом:

Чтобы получить такой результат, нужно сделать две вещи:

1. Создать изображение кнопки. Самостоятельно или с помощью онлайн-сервисов (например, cooltext.com).
2. Загрузить на сайт изображение и получить ссылку на него. Для этого можно воспользоваться файловым менеджером.

Кнопка на CSS

Кнопку можно оформить с помощью CSS. Для этого добавьте стили в шаблон сайта и укажите класс кнопки.

Добавьте в разделе Панель управления / Дизайн / Редактор / CSS:

.site-button {
 background-color: #488bfa;
 border: 2px solid #ffffff;
 color: #ffffff;
 padding: 12px 26px;
 border-radius: 10px;
 font-size: 17px;
}

Тогда HTML-код самой кнопки будет следующим:

<a href="любая ссылка" class="site-button">Нажмите здесь!</a>

А на сайте кнопка отобразится так:

Нажмите здесь!

Не пугайтесь, если CSS кажется вам незнакомым и странным. Чтобы настроить кнопку под свои нужды, достаточно изменить отступы / размер шрифта в пикселях и цвет фона / текста в HEX (чтобы посмотреть все цвета, наберите в Яндексе запрос "hex цвета онлайн").

Ваша кнопка на других сайтах

В некоторых случаях есть необходимость давать пользователям возможность устанавливать вашу кнопку на своих сайтах. Если предоставите готовый HTML-код кнопки, то они без труда смогут это сделать. Для этого нам потребуется создать текстовое поле и поместить внутрь него готовый код. Каждый тип кнопки будет иметь свой код:

Обычная кнопка

<textarea onclick="this.select()"><input type="button" value="Нажмите здесь!" onclick="location.href='любая ссылка'">
</textarea>

<input type="button" value="Нажмите здесь!" onclick="location.href='любая ссылка'">

Кнопка с фоновым изображением

<textarea onclick="this.select()"><a href="любая ссылка" target="_blank"><img src="ссылка на изображение"></a>
</textarea>

<a href="любая ссылка" target="_blank"><img src="ссылка на изображение"></a>

Кнопка на CSS

<textarea onclick="this.select()"><a href="любая ссылка" class="site-button">Нажмите здесь!</a></textarea>

<a href="любая ссылка" class="site-button">Нажмите здесь!</a>

Установка кнопки на сайт

Теперь необходимо добавить код кнопки на свой сайт. Это удобно делать с помощью конструктора:

Добавьте блок:

Добавьте код кнопки в блок:

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