Кнопки для сайта html: Красивые кнопки для сайта HTML + CSS — 24 готовых варианта

Направление слева направо (RTL)
Да  Нет

Текст кнопки «Не нравится»

Текст кнопки «Нравится» после нажатия

Текст кнопки «Не нравится» после нажатия

Всплывающая подсказка кнопки «Нравится»

Всплывающая подсказка кнопки «Не нравится»

Всплывающая подсказка кнопки «Нравится» после нажатия

Всплывающая подсказка кнопки «Не нравится» после нажатия

Текст перед кнопками «Поделиться»

Текст кнопки «Закрыть» во всплывающем окне

Текст во всплывающем окне при отключённой функции «Поделиться»

Текст перед кнопками «Отблагодарить рублём»

css — Кнопки на html-странице не открываются на отдельную страницу

Задавать вопрос

спросил 4 года, 2 месяца назад

Изменено 4 года, 2 месяца назад

Просмотрено 137 раз

У меня возникли проблемы с тем, чтобы кнопки в нижней части моей домашней страницы давали ссылки на другие мои страницы, содержащие различную информацию, например таблицы, которые я создал в Access. Это последний проект для вводного курса колледжа по информационным технологиям, и я никогда не делал веб-сайт.

Пробовал много разных вещей, но вроде работает только на компе, где все файлы уже скачаны, а не с не локального сервера.

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

 


    Серийные убийцы

 
Окончательный проект LIS 351 Люка Тинси
 

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


    Серийные убийцы, на которых я сосредоточился:
    <ул>
    
1. Тед Банди
    
2. Джеффри Дамер
    
3. Гарольд Шипман
    
4. Белль Ганнесс
    
5. Джон Уэйн Гейси
    
6. Эдмунд Кемпер
    
7. Гэри Риджуэй



Нажмите на ссылки ниже, чтобы получить дополнительную информацию!
Информация о серийных убийцах
Методы
Документация
Корреляция с холодной погодой


Цитаты
Отражение отражения

 

• HTML
• CSS
• Интернет
• Кнопка

Если другие файлы .html находятся в той же папке/каталоге, что и этот файл, измените ссылки на него.

 Информация о серийных убийцах
 

Я также настоятельно рекомендую удалить пробелы в именах документов и вставить SerialKillersInfoQuery. html

 Информация о серийных убийцах
 

Короче говоря, просто добавьте ./infront к именам ваших html-файлов.

Правильный способ добавить ссылку на кнопку — использовать тег a.

Затем вы можете использовать немного CSS, чтобы ваш тег выглядел как кнопка Вот пример: вы можете просто заменить то, что находится в href, вашим html-файлом

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

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Требуется, но никогда не отображается

Опубликовать как гость

Требуется, но не отображается

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

html — Выберите один из двух вариантов на веб-сайте, следует ли использовать кнопки или радиокнопки?

Мне пришло в голову, что может быть лучше использовать для этого переключатели?

Почти наверняка это должен быть переключатель, так как для пользователей программ чтения с экрана будет объявлено, что есть 2 варианта и какой вариант они выбрали (если есть).

Если бы это были просто кнопки, они бы не знали, сколько вариантов у них есть для выбора.

Какой предпочтительный способ сделать что-то подобное?

Теперь, поскольку радиокнопки s, они должны содержаться в форме.

Это означает, что для пользователей программ чтения с экрана включен «режим форм», что упрощает навигацию и т. д. Таким образом, они не должен автоматически загружать следующую страницу (поскольку это не ожидаемое поведение, а ожидаемое поведение является ключом к доступности).

Вместо этого после выбора параметра вы должны активировать кнопку «Далее», которая также должна быть кнопкой «Отправить» для формы.

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

Поведение форм для рассмотрения

И последнее соображение заключается в том, что для соблюдения требований WCAG пользователи должны иметь возможность вернуться и изменить свой ответ или отредактировать свой ответ позже, или, если это часть формы, состоящей из нескольких частей, которую нельзя изменить после отправки, они должны увидеть резюме всех их выборов перед окончательным представлением.

Это делается для того, чтобы обеспечить соблюдение рекомендаций G98: Предоставление пользователю возможности просматривать и исправлять ответы перед отправкой и указаниями G164: Предоставление установленного времени, в течение которого онлайн-запрос (или транзакция) может быть изменен или отменен пользователем после сделать запрос

Заключительные мысли

Во втором примере с переключателями ваши атрибуты aria не совсем правильные.

Все, что относится к метке , читается до ария-описывается .

Итак, в настоящее время при выборе радиокнопки это будет выглядеть так:

«Да, я люблю яблоки. Вы любите яблоки? Яблоки — это разновидность фруктов, которые могут быть сладкими или кислыми».

Вам не нужно, чтобы описание читалось с каждой радиокнопкой, так что это упрощает задачу, и, возможно, вам следует использовать aria-labelledby вместо этого и дайте вашему идентификатор, так как он будет читать все элементы, на которые есть ссылки, по порядку (так что aria-labelledby="q-appleTitle yourNewLabelID" вместо вашего текущего aria-describedby ) .

Наконец, если вы сделаете это, вам больше не понадобится aria-label на элементах . На данный момент это огромный перебор.

Однако для людей с когнитивными расстройствами возможность увидеть «Да, я люблю яблоки» определенно будет полезной, поэтому я бы рекомендовал изменить текст метки на этот, если позволяет место, небольшая дополнительная многословность для программы чтения с экрана того стоит.