subscribe
arrow
К списку статей

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

06.04.21
162 просмотров
Создание страницы
При создании сайтов с нуля и на конструкторе один из частых вопросов – как сделать кнопку с сcылкой, не используя сложных кодов, программирования, Java Script, посредством одного html. Есть несколько способов сделать элемент, при нажатии на который происходит переход на определенную страницу.
Кнопка 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.
CSS
Это не язык программирования, а формальный язык для описания оформления внешнего вида HTML-документа.
Объектам придают практически любой вид при помощи html и эффектов CSS:
— Градиентная заливка
— Тень
— Изменение форм и размеров
— Оформление ссылки картинкой
— Перенаправление на телефонный номер или мессенджер 
— Меню-аккордеон (Сворачивающееся и разворачивающееся)
— Выпадающее меню
— Опции «Назад», «Вернуться вверх»
— Hover -эффекты (инверсия, изменение цвета и прозрачности, изменение размера, расположения объекта и многое другое)

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

1. Чистый html
Линк маскируется под кнопочку следующим образом:
1)Создать стандартный линк и указать адрес к стилям
2)Прописать стили, которые преобразуют линк в привычный прямоугольник:
<a>{
padding: 10px 10px;/* отступы от букв до краев */
text-decoration: none;/* убирает подчеркивание */
}</pre>
Каждая ссылка на странице станет выглядеть как кнопка.
2. Html/CSS
Все практически как в первом способе. Но не используем стили «по умолчанию», а рисуем вокруг текста линка обводку, фигуру, заливку цветом, чтобы он стал похожим на кнопку. Этот метод индивидуален для каждой ссылки.
Нужно придумать и написать стиль:
<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>
3. Добавить дизайн
В дизайне многостраничника, интернет-магазина, лендинга для Инстаграм в качестве кнопки используют фотографии, картинки, нарисованные в Фотошопе. Чтобы при клике на изображение срабатывал переход по ссылке, нужно:
Обернуть картинку тегом:
<pre><a href="site.ru"><img src="button.png"></a></pre>
Сохраняйте исходники кнопок, нарисованных в графическом редакторе. Если понадобится изменить информацию, придется рисовать заново.

Примеры использования

Последний метод применим при создании лендинга для Инстаграм в конструкторе Hipolink.net.
В разделе «Фото» можно вставить изображение, в настройках добавить к нему url. Клик на картинку переведет в магазин, другой раздел, сайт. Так картинка или фотография станут кнопкой.
Создание ссылок в виде кнопок предусмотрено одноименным разделом.
Ваша ссылка в конструкторе лендингов
Знания html не понадобится: настройки интуитивно понятны для неопытного пользователя. Бесплатный тариф предоставляет опции редактирования формы и размера кнопок. На тарифах «Personal» и «Business» доступно изменение цвета, добавление иконок.
Коментарии к статье
Доступно для ввода 0 из 700 символов
Оставить коментарий