3 способа сделать ссылку кнопкой с помощью HTML

При создании сайтов с нуля и на конструкторе один из частых вопросов – как сделать кнопку с сcылкой, не используя сложных кодов, программирования, Java Script, посредством одного html. Есть несколько способов сделать элемент, при нажатии на который происходит переход на определенную страницу.

На любом сайте – визитке, информационном, магазине, лендинге – пользователи должны совершить необходимое действие. Интуитивно понятный элемент действия – кнопка. Ее используют, чтобы призвать посетителя сайта совершить важное действие: купить, отправить, скачать, войти и т.п.

Другая часть интерфейса – ссылки, их гораздо больше, чем кнопок. В виде простого текста (<a href="адрес">Ссылка</a>) они выглядят неприглядно, не всегда соответствуют дизайну. Основное правило оформления ссылок: пользователь должен понять, что перед ним не обычный текст без наведения мышью.

Кнопка и ссылка – разные понятия в html. Первая запускает какой-то процесс, вторая перенаправляет куда-либо.

Пример: оплата в интернете. Человек вводит номер карты в поле и нажимает «Оплатить». Нажатием запускается команда, написанная языком программирования: формируется запрос в банк, деньги списываются со счета. Если поля для заполнения останутся пустыми, при нажатии ничего не произойдет. Пользователь останется на том же месте, не произойдет никаких действий. Команда сработает только при соблюдении необходимых условий. То же произойдет при заполнении данными полей анкет, онлайн-калькуляторов, тестов. В этом случае это элемент <button>.

HTML запрещает комбинировать между собой <button> и <a>. Несмотря на это есть способы открытия страницы при нажатии на <button>.

Вложить <button>внутрь элемента <form> в html

Использовать JavaScript. Добавить к элементу <button> событие onclick, внутри него вписать document.location, значением будет адрес веб-страницы.

<button onclick="document.location='page/new.html'">Переход по ссылке</button>

Заставить кнопку действовать, как ссылка – нерациональное решение. Это перегружает код и повышает вероятность ошибок.

Если нужно перенаправить человека на другую страницу, линк стилизуют под кнопку. Для этого используют CSS.

Это не язык программирования, а формальный язык для описания оформления внешнего вида HTML-документа.

Объектам придают практически любой вид при помощи html и эффектов CSS:

Линк маскируется под кнопочку следующим образом:

1)Создать стандартный линк и указать адрес к стилям

2)Прописать стили, которые преобразуют линк в привычный прямоугольник:

<a>{

padding: 10px 10px;/* отступы от букв до краев */

text-decoration: none;/* убирает подчеркивание */

}</pre>

Каждая ссылка на странице станет выглядеть как кнопка.

Все практически как в первом способе. Но не используем стили «по умолчанию», а рисуем вокруг текста линка обводку, фигуру, заливку цветом, чтобы он стал похожим на кнопку. Этот метод индивидуален для каждой ссылки.

Нужно придумать и написать стиль:

<pre><link rel="stylesheet" href="link_button_3.css">

<a class="ssilka" href="https://site.ru">Ваша ссылка</a></pre>

<pre>.ssilka{ border:1px solid #ccc; /*рамка*/

background:#eaeaea; /*фон*/

padding: 10px 10px; /*отступы внутри*/

text-decoration: none; /*убрать подчеркивание*/ }</pre>

В дизайне многостраничника, интернет-магазина, лендинга для Инстаграм в качестве кнопки используют фотографии, картинки, нарисованные в Фотошопе. Чтобы при клике на изображение срабатывал переход по ссылке, нужно:

Обернуть картинку тегом:

<pre><a href="site.ru"><img src="button.png"></a></pre>

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

Последний метод применим при создании лендинга для Инстаграм в конструкторе Hipolink.net.

В разделе «Фото» можно вставить изображение, в настройках добавить к нему url. Клик на картинку переведет в магазин, другой раздел, сайт. Так картинка или фотография станут кнопкой.

Создание ссылок в виде кнопок предусмотрено одноименным разделом.

Знания html не понадобится: настройки интуитивно понятны для неопытного пользователя. Бесплатный тариф предоставляет опции редактирования формы и размера кнопок. На тарифах «Personal» и «Business» доступно изменение цвета, добавление иконок.