Автор оригинала: Jessica Wilkins.
В этой статье мы собираемся исследовать три различных способа сделать кнопку HTML ACT, как ссылка.
Это методы, которые мы перейдем:
- Укажите ссылку, чтобы выглядеть как кнопка
- Использование атрибутов действия и формации в форме
- Использование события JavaScript OnClick
Но сначала давайте посмотрим на неправильный подход.
Почему этот подход не работает с элементом?
Внесенный ниже фрагмент кода приводит к веб-сайту FreeCodeCamp, когда он нажал.
Тем не менее, это недействительно HTML.
Это считается плохой практикой, потому что это делает его неясным относительно намерения пользователя.
Ссылки должны перемещаться по пользователю в другую часть веб-страницы или внешнего сайта. И кнопки должны выполнять конкретное действие, такое как отправку формы.
Когда вы устанавливаете один внутри другого, он заставляет сбиваться с толку тем, что вы хотите выполнить действия. Вот почему лучше не быть расположенным на кнопке на якоре.
Как стиль ссылку, чтобы выглядеть как кнопка с CSS
Этот первый подход не использует кнопку вообще. Мы можем стимулировать якорный тег, чтобы выглядеть как кнопка с использованием CSS.
Это HTML-стиль по умолчанию для якорного тега.
Мы можем добавить класс к привязку, а затем использовать этот селектор класса для стиля элемента.
Если вы хотите ссылку, чтобы открыть новую страницу, вы можете добавить target = "_ blank" Атрибут, как это:
Затем мы можем добавить цвет фона и изменить цвет шрифта, как это:
.fcc-btn {
background-color: #199319;
color: white;
}Следующий шаг будет добавлять некоторые прокладки вокруг текста:
.fcc-btn {
background-color: #199319;
color: white;
padding: 15px 25px;
}Наконец, мы можем использовать свойство оформления текста для удаления подчеркивания из текста:
.fcc-btn {
background-color: #199319;
color: white;
padding: 15px 25px;
text-decoration: none;
}Теперь у нас есть якорный тег, который выглядит как кнопка.
Мы также можем сделать эту «кнопку» немного более интерактивной, изменив цвет фона в зависимости от состояния ссылки.
.fcc-btn:hover {
background-color: #223094;
}Мы могли бы получить более запутанные с дизайном, но это просто для того, чтобы показать вам основы стилизации ссылки, такими как кнопка.
Вы также можете выбрать использовать библиотеку CSS, как Bootstrap Отказ
Если ваш проект уже включает в себя загрузку, вы можете использовать встроенные стили кнопок. Но я бы не импортировал Bootstrap только для стиля одной ссылки.
Каковы проблемы с этим подходом?
Есть некоторые дебаты, является ли хорошая практика в стиле ссылок как кнопки. Некоторые будут утверждают, что ссылки всегда должны выглядеть как ссылки и кнопки должны выглядеть как кнопки.
В веб-книге под названием Устойчивый веб-дизайн Джереми Кейт утверждает, что
Почему я решил вызвать эту дискуссию?
Моя цель – не заставить вас выбрать одну сторону дискуссии над другим. Я просто хочу, чтобы вы знали об этом продолжающемся обсуждении.
Как использовать атрибуты действия и формации, чтобы сделать кнопку в форме
Как использовать атрибут действий
Другая альтернатива будет расположена на кнопке внутри формы и использовать атрибут действий.
Пример ввода:
Пример кнопки:
Это будет стиль кнопки по умолчанию.
Мы могли бы использовать одни и те же стили, как раньше, но нам придется добавить указатель курсора и настроить границу никому, как это:
.fcc-btn {
background-color: #199319;
color: white;
padding: 15px 25px;
text-decoration: none;
cursor: pointer;
border: none;
}
Как использовать атрибут формации
Подобно предыдущему подходу, мы можем создать форму и использовать атрибут формации.
Пример ввода:
Пример кнопки:
Вы можете использовать атрибут формации только с входами и кнопками, которые имеют Тип = "изображение" или Тип = «Отправить» Отказ
Это семантически правильно?
Хотя это представляет собой рабочее решение, возникает вопрос, если это семантически правильно.
Мы используем теги форма, но это не функционирует как реальная форма. Целью формы является сбор и представить пользовательские данные.
Но мы используем кнопку «Отправить», чтобы навигаться по пользователю на другую страницу.
Когда дело доходит до семантики, это не хороший способ использовать теги форма.
Побочные эффекты для использования атрибутов действия и формации
Когда вы нажимаете на кнопку, что бывает интересное с URL. У URL сейчас есть вопросительный знак в конце этого.
Причина этого изменения заключается в том, что форма использует метод получения. Вы можете переключиться на метод пост, но могут быть случаи, когда это не идеально.
Хотя этот подход является действительным HTML, он приходит с этим непреднамеренным побочным эффектом.
Как использовать событие JavaScript OnClick, чтобы сделать кнопку
В предыдущих подходах мы посмотрели на решения HTML и CSS. Но мы также можем использовать JavaScript для достижения того же результата.
Пример ввода:
Пример кнопки:
location.href представляет местоположение определенного URL. В этом случае Window.location.href вернется https://www.freecodeCamp.org/ Отказ
Недостатки к этому подходу
Хотя это решение работает, есть некоторые потенциальные вопросы для рассмотрения.
Если пользователь решил отключить JavaScript в своем браузере, то ясно, что это решение не будет работать. К сожалению, это может привести к плохому пользователю опыта.
Заключение
Целью данной статьи было показать вам три разных способа, которые вы можете сделать кнопки, действуют как ссылки.
Первый подход был для разработки ссылки, чтобы выглядеть как кнопка. Мы также изучили обсуждение, это хорошая идея, чтобы изменить внешний вид ссылок, чтобы выглядеть как другой элемент.
Второй подход использовал атрибуты формы и формации. Но мы также узнали, что этот подход имеет некоторые побочные эффекты с URL-адресом и не являются семантически правильными.
Третий подход использовал событие JavaScript OnClick и Window.Location.HREF. Но мы также узнали, что этот подход не может работать, если пользователь решит отключить JavaScript в своем браузере.
Как разработчик, действительно важно посмотреть на плюсы и минусы определенного подхода, прежде чем включать его в свой проект.
Я надеюсь, что вам понравилось эту статью и узнал несколько вещей на пути.
Счастливое кодирование!