Ссылка кнопка css: Ссылка как кнопка | htmlbook.ru — Вебджем.рф

Содержание

Ссылка — это ссылка, кнопка — это кнопка

Мы используем a без href, создаем для ссылок пользовательские функции onClick или используем кнопки для перехода на другие страницы.

В этой небольшой статье мы постараемся дать разъяснения, как использовать ссылки и кнопки для веб-ресурсов, чтобы повысить их доступность и улучшить качество SEO.

Ссылки не должны быть кнопками

Ссылки используются для переходов куда-либо.

Например, если пользователь хочет перейти на новую страницу сайта, Вы должны использовать ссылку. Браузер не будет корректно отображать ссылку без атрибута href. Поисковые системы сканируют только те ссылки a, которые имеют атрибут href

Использование тега a без href или использование в качестве ссылки другого тега, оказывает отрицательное влияние на SEO и доступность.

Вот примеры ссылок, которые Google будет сканировать:

<a href="www. google.com">Хорошая ссылка 1</a>
<a href="/newpage/file">Хорошая ссылка 2</a>

А вот примеры ссылок, которые Google сканировать не будет:

<a>Плохая ссылка 1</a>
<a go="goto('www.google.com')">Плохая сылка 2</a>

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

Кнопки не должны быть ссылками

Кнопки используются для изменения состояний. Они не должны использоваться для перехода на другие сайты, за исключением кнопки submit в формах.

Вот примеры корректного использования кнопок:

<button >Сохранить</button>
<button href="/newpage/file">Перейти</button>

А вот примеры неверного использования кнопок:

<button>Перейти</button>
<button href="www.google.com">Перейти</button>

Кнопки могут использоваться для модификации динамического содержимого сайта.

ARIA

The Web Accessibility Initiative’s Accessible Rich Internet Applications Suite (WIA-ARIA или ARIA) — набор инструментов, позовляющих сделать веб-контент более доступным.

Благодаря ARIA для всех тегов появился атрибут

aria-role, преобразующий их семантическую роль для улучшения воспроиятия с помощью специальных возможностей (assistive technologies).

<div tabindex="0" role="button">
  Это div, который работает как button
</div>
<a tabindex="0" role="button">
  Это ссылка, которая работает как button
</a>

tabindex="0" — может иметь в качестве своего значения любое положительное целое число от 0 до 32767 и определяет порядок перехода при нажатии кнопки tab или ее эквивалента на специальном устройстве.

В любом случае семантическая HTML разметка должна преобладать над ARIA.

Спасибо за внимание.

Кнопка или ссылка?. Если коротко: | by Nikita | WebbDEV

Используйте для кнопок — кнопки, а для ссылок — ссылки.

Для кнопок использовать
ссылки
— не комильфо.

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

В первую очередь для дизайнера который делает макет сайта, но не дорисовывает детали свойственные вебу. Своеобразная попытка объяснить, что веб-сайт лежит за пределами плоской полиграфии.

Во вторых для верстальщика к которому пришёл макет без состояний, чтобы было куда дизайнера послать.

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

Когда наводят указатель на ссылку которая кнопка то в левом нижнем углу появляется надпись javascript:;:

Или адрес с решёткой:

ПКМ на такой кнопке и контекстное меню любезно предложит:

ctrl + ЛКМ на такой кнопке откроют новую вкладку на которой будет ровно та страница, с которой она была открыта.

Кроме того такая ссылка с решёткой в качестве ссылки, станет :visited, если ещё не стала до этого, и приобретёт соотстветствующее стилевое оформление. Если дизайнер его конечно не зарезал, что в большинстве случаев конечно зря, о чём ниже.

В JavaScript скриптах для таких кнопок дополнительно используется e.preventDefault(), чтобы предотвратить действие кнопки по умолчанию (переход по ссылке) «— это костыль.

Если клик приведёт к смене адреса,
этот адрес можно скопировать,
отправить по электронной почте,
на него можно снова зайти,

это не адрес самой страницы — это ссылка.

У ссылки должны быть стили для обычного, :active, :visited, :focus и :hoverсостояний.

Поздравляю! С такими стилями все ваши ссылки визуально превратятся в обычный текст. Найти их на странице станет крайне затруднительно.

И помните, если вы ставите !important и не очень понимаете почему вы без него не можете обойтись, то читайте это слово как импотент. Возможно вам нужно немного изменить селектор для того, чтобы перекрыть тот, который вам мешает.

обычном состоянии a должна быть синей или подчёркнутой, а лучше и синей и подчёркнутой, чтобы пользователь без наведения мыши понимал, что это — ссылка. Пользователь привык к тому, что синие слова на странице это ссылки, даже если они не подчёркнуты. Если вам не нравится синий цвет для ссылок, меняйте его, но тогда ссылки подчёркивайте.

Когда курсор находится над ссылкой, она становится :hover и в данном примере приобретает подчёркивание. Так пользователь поймёт, что это точно ссылка, на которую можно кликнуть.

Когда на ссылку устанавливается указатель, перемещаемый табулятором TAB ↹
она становится :focus. В 2016 году это может показаться странным, но есть люди которые работают с сайтам посредством клавиатуры. У некоторых вовсе сломана мышь. В любом случае, занулять :focusсостояние — это преступление против таких людей.

Особые спецэфекты применять не обязательно, достаточно таких как у :focus.

CSS чтобы не писать дважды:

Важное состояние :active происходит когда пользователь уже кликнул на ссылку, но клавишу ещё не отпустил. Помогает пользователю понять, что его клик сработал, и ему не нужно кликать по ней несколько раз, чтобы точно перейти на нужную страницу.

Можно все посмотреть‽

:visited, поможет пользователю не забыть какие странички он уже открывал и не открывать их повторно. Так вместе с :active и :hover мы чуточку разгрузим интернет от случайных загрузок, и сделаем его чуть лучше и быстре.

В эпоху HTML4 вместо кнопок использовались ссылки подчёрнутые пунктирной линией. Этот паттерн устарел.
Подчёркивание пунктирной линией рекомендуется для тултипов при наведении.
Например у <abbr> такое выделение поможет понять, что можно навести указатель и получить расшифровку.

Пример нестандартного оформления ссылок:

Слова в ссылке должны подчиняться правилам русского языка, капс непозволителен (исключение — аббревиатуры)

Если клик не меняет адрес страницы,
адрес нельзя скопировать
и нельзя этим адресом поделиться — это кнопка.

В кнопке позволителен капс, при условии, что вы не используете аббревиатуры. Особенно в неочевидных местах.
Если у вас встречаются аббревиатуры, то верхний регистр в кнопке не желателен, выделяйте их другим способом. Не искушайте пользователей тапать по тому, что не тапается. У пользователей тачскрина нет возможности подсмотреть :hover или :focus состояние. Ну или есть, но происходит это всё не очень удобно, обычно уже после свершившегося тапа.

<button /> может быть недоступен на архаичных браузерах или устройствах. У кнопок не применятся стили без специальных JavaScript скриптов.
Но вас это не должно беспокоить. На таких устройствах часто и JavaScript не работает. И быть может CSS.

Вообще если следовать идеологии что всё, что должно обрабатываться JavaScript’ом, должно добавляться JavaScript’ом, такой проблемы вовсе не возникнет.
Что JSΩ, то JSॐ! Как говорится.

<button> по умолчанию имеет атрибут type=submit даже если его не прописать.

Ещё этот атрибут может принимать значения reset для сброса заполнения в форме
и button чтобы исключить влияние на форму. Правила хорошего тона предполагают,
что везде нужно писать <button type="button">Кнопка</button>.

Но на деле можно ограничится полной записью только внутри <form></form>,
type=submit в остальных местах ни на, что не влияет.

Это кстати отличный сбособ для стилизации кнопки отправки формы.
В отличии от <input type="submit" value="Кнопка" />, в содержимое
button можно писать любой HTML код, а не только текст.
Например

Это даёт даже больше свободы в стилевом оформлении чем <input type="image" />

Похожи на состояния у ссылок за исключением того, что у кнопок нет состояния :visited, зато есть состояние :disabled.
Обычно дефолтное оформление браузера выпиливается основательно, иногда с нейтрализацией отображения состояний отличных от обычного.
Да. Этот гайд для тебя, любитель превратить веб-страницу в бумажный аналог.

Стилей для этих штучек понадобится немного больше, но всё не так страшно. Кроме того ребята из Twitter и отчасти Google уже позаботились о реализации велосипеда.
Тёплый ламповый Bootstrap и новомодный MaterializeCSS, например.

Так выглядит <button>Кнопка</button> в моём Chrome 54:

На картинке button, button:hover, button:focus, button:active соответственно.

Без излишеств. Но учитывая движение Google в направлении Material Design, вполне может статься так, что в скором времени их заменят на подобные аналоги.

Для наглядности — мой вариант велосипеда который выглядит странновато, но для примера сойдёт.

Обычная, наведение, клик, отключена соответственно.

Посмотреть в живую на JSFiddle

Ты цээсэсов можешь и не знать, но состояния отрисовать обязан!

От дизайнера помимо макета с обычным состоянием ссылки или кнопки, требуется прилагать различные состояния, дабы не устраивать верстальщику батхерт.
Например так:

Ребята из Google сделали такой макет.

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

Опубликовано в учебниках

В этом уроке мы покажем вам, как превратить ссылку в кнопку CSS. Здесь у нас есть базовая веб-страница со скучной ссылкой с надписью «Нажми на меня»…

основная ссылка

Мы стилизуем ссылку с помощью CSS, чтобы она выглядела так …

text-shadow на тексте

Эффекты был немного преувеличен для учебника, чтобы вы могли лучше видеть. Но вы можете немного изменить и смягчить значение в своем реальном приложении.

Вы можете увидеть полный код в демо-версии, щелкнув правой кнопкой мыши и выбрав «Просмотреть исходный код» в браузере.

В ходе урока мы узнаем о box-shadow, text-shadow, linear-gradient, border-radius и многом другом.

Базовая кнопка CSS

HTML-код, с которого мы начинаем, выглядит следующим образом: основная ссылка…

ссылка на HTML-странице

1. Сначала мы добавляем стиль класса к нашему элементу ссылки, чтобы мы могли начать стилизовать его…

добавить класс к элементу

Мы назвали наш стиль «btnLink», произвольное имя класса, которое мы придумали. Придумай свое.

2. Для целей этого руководства мы добавим блок стиля CSS с правилом CSS в разделе HEAD HTML-кода. В производственном коде вместо этого вы должны добавить его в указанный внешний файл CSS.

добавить блок стилей css

В блок стилей мы не добавили ни одного атрибута. Если атрибута нет, предполагается текст/css.

3. Для нашего первого правила CSS мы установили …

отображение: встроенный блок;

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

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

добавить отступы и границы

Мы дали 5 пикселей для верхнего и нижнего отступов. И дал однопиксельную сплошную границу цвета #006699 (темно-синий цвет).

Теперь наша кнопка выглядит вот так, у нее есть форма…

кнопка с формой

5. Давайте зададим цвет фона для нашей кнопки.

add background-color

Цвет фона «#0097DF» должен быть немного светлее, чем цвет границы #006699. Так это выглядит так…

кнопка с цветом фона

6. Выглядит не очень хорошо, потому что между цветом текста по умолчанию и цветом фона недостаточно контраста. Сделаем цвет текста белым …

цвет текста белым

Итак, мы получаем лучшую контрастность …

лучшую контрастность

7. Но давайте избавимся от подчеркивания текста. Текст кнопки обычно не имеет подчеркивания. Мы делаем это, установив для text-decoration значение none …

text-decoration none

8. И теперь у нас есть кнопка…

у нас есть кнопка

ссылка — CSS-класс Bootstrap

← список всех классов Bootstrap

Проверить

.btn-link в реальном проекте

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

Открыть в визуальном редакторе →

Вам не нужно запоминать все классы CSS.

Ссылка кнопка css: Ссылка как кнопка | htmlbook.ru

Ссылка — это ссылка, кнопка — это кнопка

Ссылки не должны быть кнопками

Кнопки не должны быть ссылками

ARIA

Кнопка или ссылка?. Если коротко: | by Nikita | WebbDEV

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

Базовая кнопка CSS

Параметры стиля для нашей кнопки

Добавление эффекта наведения на кнопку CSS

Добавление необычных стилей к нашему Кнопка CSS

Разница между встроенным блоком и встроенным

Почему бы не использовать кнопку?

ссылка — CSS-класс Bootstrap

Проверить

Добавить комментарий Отменить ответ

Рубрики