1 год назад
🔗 Link vs Button: что, когда и как использовать? Существует очевидная разница в использовании этих двух элементов. Ссылки служат для навигации. Они направляют пользователя на другую страницу или другой раздел текущей страницы. Кнопки же используются для запуска действия на той же странице. Например, отправки формы, модального окна или вызова функции JavaScript. На Webflow уже существуют стандартные решения для использования в проектах — элементы «Link» и «Button». Но с ними могут возникать проблемы. Оба элемента имеют одинаковую разметку HTML = <a>. А это не до конца соответствует принципам доступности, которые рекомендуют браузеры в 2024 году. 〰️ К счастью, есть два способа исправить эту ошибку: Вариант 1: использование атрибутов Атрибут aria предоставляет браузерам дополнительную информацию при чтении вашего HTML-кода. Если добавить значение aria к описаниям, то оно поможет определить тип элемента как «Link» или «Button». Это позволит поисковым системам провести различие. Вариант 2: cоздание «настоящей» кнопки Этот вариант более рабочий. Он может использоваться, если вы хотите использовать кнопку для запуска действия на странице. Например, запустить открытие всплывающего окна. Чтобы создать HTML-кнопку, потребуется использовать не готовый элемент, а «Custom element»: 1️⃣ добавьте Custom Element в ваш проект 2️⃣ перейдите в настройки 3️⃣ измените тег элемента: Div → Button После этого можно перейти к дополнительным настройкам: например, добавить CSS-класс элемент, чтобы задать ему ваш дизайн. Или добавить триггер для запуска JavaScript-анимацию с помощью этой кнопки.
266 читали · 1 год назад
Как сделать кнопку в HTML?
Добрый день. Сегодня рассмотрим как просто сделать красивую кнопку на HTML и добавить к ней стили. Итак, приступим... Для начала, как всегда, создаем файл test.html в любом месте нашего ПК. Открываем наш файл test.html и вставляем строку подключения нашего файла со стилями: <head> <link rel="stylesheet" href="styles.css"> </head> Далее мы прописываем нашу кнопку: <body> <button class="custom-btn btn-2">Кнопка</button> </body> Но без стилей наша кнопка выглядит очень скучно, исправим это. Открываем наш файл styles...