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

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

Содержание:

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

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

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

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

Пример отображения:

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

Если у вас есть изображение кнопки, его можно вставить внутрь тега <a> — так кнопка будет вести на нужную ссылку:

<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>

Отображение на сайте:

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

Кнопка для размещения на других сайтах

Если вы хотите, чтобы пользователи могли устанавливать вашу кнопку у себя на сайтах, предоставьте им готовый 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>

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

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

Добавьте новый блок:

Вставьте в блок HTML-код кнопки:

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