Как убрать border у button

Как убрать обводку при клике на input

При клике и фокусе на input появляется обводка. Как её убрать?

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

9 ответов 9

Этот же приём убирает обводку пунктиром вокруг нажатой ссылки и вокруг любого из элементов формы.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Попробуйте поставить box-shadow: none; У меня была такая проблема. Я просто сделал так при использовании Bootstrap

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

У меня была такая проблема. Я просто сделал так:

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Примените свойство outline:none

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Конкретно для input и конкретно при фокусе на нем:

Проверял на Chrome.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Попробуйте поставить box-shadow: none;

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Допишите также onFocus=»this.blur()»

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Лучше всего сделать элемент A поверх всей надписи, тогда заслонять надпись ничего не будет и выглядеть будет отлично.

Источник

How to remove outline border from input button

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

16 Answers 16

Using outline: none; you can remove that border in chrome.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Focus outline in Chrome and FF:

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у buttonКак убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

removed button focus outline:

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

It works for me simply 🙂

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

This one worked for me

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Set both the outline and the box-shadow properties of the button to none and make them important.

The reason for setting the values to **important** is that, if you are using other CSS libraries or frameworks like Bootstrap, it might get overridden.

The outline property is what you need. It’s shorthand for setting each of the following properties in a single declaration:

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

To avoid the problem caused when you change the outline property on a focus, is to give a visual effect when the user Tab on the input button or click on it.

In this case is a submit type, but you can apply to a type=»button» too.

Given the html below:

In the css style do the following:

This code will remove button border and will disable button border focus when the button is clicked.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

As many others have mentioned, selector:focus will remove that border but that border is a key accessibility feature that allows for keyboard users to find the button and shouldn’t be removed.

Since your concern seems to be an aesthetic one, you should know that you can change the color, style, and width of the outline, making it fit into your site styling better.

It’s greatly simple than you think. When the button is focussed, apply the outline property, like this:

But when I use none value, it doesn’t work for me.

Источник

Спросил myRoot,
19 февраля 2014

Вопрос

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

myRoot

Тег Button по умолчанию имеет рамку.
button

Помогло. Но в фокусе всё равно появляется рамка.

Псевдокласс не помогает

Ссылка на комментарий
Поделиться на других сайтах

1 ответ на этот вопрос

Рекомендованные сообщения

Присоединяйтесь к обсуждению

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

Похожие публикации

Все привет.
Использую bootstrap 3, хотя это наверно и не существенно. Необходимо сделать, чтобы у активных кнопок внизу был указатель, как на картинке. Кнопка любого цвета с любой границей, с иконками и текстом. Но проблема именно с треугольником внизу у активной кнопки.

Не знаю, как к этому подступиться. Толкните в нужном направлении, спасибо.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Источник

Стилизация старого доброго элемента button

Кнопка — это один из тех элементов, которые чаще всего используются на веб-страницах. Тег может быть применён для запуска некоего процесса вроде вывода данных, открытия модального окна, отправки формы и так далее. В материале, перевод которого мы публикуем, речь пойдёт о тонкостях стилизации элемента button и о том, как оформлять кнопки с учётом того, чтобы они хорошо работали бы в любых браузерах. Кроме того, тут будет рассмотрено большинство часто используемых стилей кнопок. Поговорим мы здесь и о некоторых сложностях, которые возникают при работе с кнопками.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Стили, применяемые к кнопкам по умолчанию

Может, разговор о «стандартных стилях» покажется кому-то обсуждением каких-то элементарных вещей, но, на самом деле, поговорить об этом довольно интересно. Вот стандартная таблица стилей для кнопок из пользовательского агента Google Chrome.

А вот как выглядит стандартная кнопка, при выводе которой стили по умолчанию не менялись.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

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

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Свойство appearance этих кнопок установлено в none

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Кнопка после сброса свойств

Теперь, когда мы сбросили стандартные стили кнопки, пришло время двигаться дальше. А именно, я хочу рассказать о том, как стилизовать кнопки, основываясь требованиях, предъявляемых к их дизайну.

Стилизация обычных кнопок

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

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Цвет текста (Text Color), размер шрифта (Font Size), фон (Background), скругление углов (Roundness), внутренний отступ (Padding)

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

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Обычное состояние кнопки (Normal), получение фокуса (Focus), наведение на кнопку указателя мыши (Hover), отключение кнопки (Disabled)

▍Стили, применяемые к кнопкам при наведении на них мыши и при получении ими фокуса

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

Этот материал указывает на то, что важен порядок добавления стилей, применяемых к кнопке при наведении на неё мыши ( hover ) и при получении ей фокуса ( focus ).

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Хорошо, если сначала идёт стиль hover, а потом — стиль focus

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

▍Минимальная ширина кнопки

Для того чтобы кнопка хорошо выглядела, она должна иметь определённую ширину. Важно заранее об этом подумать и принять во внимание длинные и короткие надписи, которые могут содержаться на кнопках. Благодаря свойству min-width можно установить минимальную ширину кнопки. Вот моя статья, где в подробностях обсуждается это и другие подобные свойства.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Стоит задавать свойство кнопок min-width

▍Внутренние отступы

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

Взглянем на следующий рисунок.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Рекомендовано назначать кнопкам внутренние отступы

▍Семейство шрифта, используемого для надписей, расположенных на кнопках

▍Стилизация отключённых кнопок

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

Вот HTML-код, описывающий отключённую кнопку:

Вот CSS-код стилизации такой кнопки:

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

▍Внешний вид указателя мыши при наведении его на кнопку

Стандартный указатель мыши, наведённый на кнопку, выглядит как стрелка. Мне нравится этот ответ на StackOverflow: «Кнопки — это традиционный элемент управления настольных программ. Это — среда, в которой указатель в виде руки никогда не использовался до наступления эры интернета. Когда на веб-страницах стали применять тот же самый элемент управления, разработчики просто пытались сделать так, чтобы кнопки выглядели так же, как в настольных приложениях».

Для того чтобы переопределить обычное поведение указателя, рекомендовано поменять стандартный курсор-стрелку на курсор в виде руки.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Стандартный курсор-стрелка и улучшенный курсор в виде руки.

Теперь, когда мы обсудили базовые вопросы стилизации кнопок, приведём полный CSS-код, включающий в себя всё то, чего мы коснулись выше:

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

Кнопки со значком

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

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Примеры кнопок со значками

Обратите внимание на то, что я воспользовался стилем vertical-align: middle для того чтобы выровнять значок и содержимое кнопки по вертикали.

Вот HTML-код кнопки, о которой идёт речь:

Может показаться, что теперь достаточно просто скрыть элемент span и дело будет сделано:

Хотя при таком подходе текст пропадает, а значок остаётся, это очень плохо в плане доступности контента. Кнопку уже «не видят» инструменты для чтения с экрана. Например, VoiceOver в macOS сообщает о том, что такая кнопка — это просто «Button», без каких-либо подробностей о ней. У этой проблемы есть несколько решений.

▍Использование SVG-значков

▍Настройка размеров кнопки со значком

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Кнопка, у которой задано CSS-свойство min-width, и кнопка, у которой это свойство не задано

▍Визуальное скрытие текста

▍Установка размера шрифта в 0

▍Использование атрибута aria-label

Если вы хотите больше узнать о кнопках со значками — взгляните на этот материал.

Кнопки, содержащие несколько строк текста

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

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Кнопка, содержащая две строки текста

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

Средство для чтения с экрана «озвучит» эту кнопку как «Subscribe to our newsletter 240K+ subscribers». Когда пользователь это услышит, это его может запутать, так как ничто не будет разделять две строки текста, выводимые на кнопке. Взгляните на скриншот инструмента Chrome для исследования доступности элементов.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Исследование доступности элементов в Chrome

Для того чтобы не путать пользователей, я предпочёл бы скрыть вторую строку текста от средств для чтения с экрана. Сделать это можно, использовав атрибут aria-hidden в соответствующем элементе :

Если по какой-то причине изменить HTML-разметку нельзя, есть и другой способ добавления дополнительного текста на кнопку. Решение этой проблемы, которое показалось мне интересным, я нашёл на сайте Smashing Magazine. Оно заключается в том, чтобы размещать содержимое, пользуясь псевдоэлементами. При таком подходе средства для чтения с экрана не будут видеть ничего лишнего. Вот CSS-код этого решения:

Ссылки () или кнопки ( )?

Когда стоит пользоваться ссылками, а когда — кнопками? Для начала давайте поговорим о том, чем они отличаются друг от друга.

▍Ссылки

▍Кнопки

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Использование ссылок и кнопок

▍Элемент не обязан выглядеть как кнопка

Мне нравится этот пример, в котором, с учётом требований доступности контента, реализована панель-«аккордеон». Вначале, если представить, что JavaScript недоступен, результат рендеринга разметки выглядит так, как показано ниже.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Материалы страницы в условиях недоступности JavaScript

Вот HTML-код фрагмента такой разметки:

В случае доступности JavaScript вышеприведённая разметка позволит описать элементы, которые могут сворачиваться и раскрываться. Достигается это путём создания кнопки и добавления её в элемент

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Материалы страницы в условиях, когда JavaScript-функциональность доступна

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

▍Кнопка загрузки

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Ссылка для загрузки документа, оформленная как кнопка

Вот код этой ссылки:

При таком подходе в нашем распоряжении оказывается ссылка, стилизованная как кнопка, которая делает своё дело, используя лишь семантические структуры HTML.

Кнопки с обводкой

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Обычная кнопка при наведении на неё мыши становится кнопкой с обводкой

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

Градиентные кнопки

Когда я работал над статьёй о позиционировании элементов, мне понадобилась кнопка с градиентным заполнением.

Мне было нужно нечто, подобное следующему рисунку.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Градиентная кнопка и её вариант с обводкой

Тут представлены два варианта кнопки — градиентная кнопка и кнопка с обводкой. Для того чтобы добиться такого внешнего вида кнопки, мне нужно было, чтобы у базовой (градиентной) кнопки имелась бы прозрачная граница. Эта граница будет показана только для кнопки с обводкой.

Тут всё, вроде бы, выглядит разумно, но в ходе работы я столкнулся со странной проблемой. Я даже попытался решить её, попросив помощи у пользователей Twitter. Эта проблема представлена на следующем рисунке.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Обычная кнопка, кнопка с градиентом (граница, на самом деле, прозрачная; цветом она выведена лишь для наглядности), кнопка со странными краями

Теперь, когда мы разобрались с тем, как выглядит градиентная кнопка с прозрачной границей, позвольте мне рассказать о причинах вышеописанных странностей.

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

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Кнопка с широкими границами и градиент

Вот, если хотите поэкспериментировать, пример на CodePen.

Что лучше — height или padding?

▍Фиксированная высота

Предположим, что у нас имеется кнопка, стилизованная следующим образом:

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

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Кнопка, текст которой не выровнен по центру

Но у этого метода есть минусы:

▍Вертикальный внутренний отступ

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

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Попытка центровки текста кнопки

Вот CSS-код стилизации этой кнопки:

В этом случае содержимое кнопки выглядит слегка смещённым. Значение верхнего внутреннего отступа нужно немного уменьшить:

Оборачивание содержимого кнопки в тег

В ходе экспериментов я выяснил, что центровка текста кнопок Adobe немного сбита. Вот как это выглядит.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Центровка немного сбита

Я исследовал эти кнопки и заметил интересный паттерн. Содержимое обёрнуто в элемент с указанием фиксированной высоты для кнопки.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Изменение высоты кнопки и автоматическое центрирование её содержимого

Вот и всё. Хочу отметить, что при написании данного раздела мне помогла эта статья.

Кнопки внутри flexbox- или grid-контейнеров

Тут у вас может появиться вопрос о том, какое отношение кнопки имеют к flex- и grid-макетам. Позвольте мне прояснить этот вопрос.

Я работал над разделом одного проекта. Мне нужно было вертикально центрировать его содержимое. Поэтому я использовал flex-макет:

То, что у меня получилось, меня несколько удивило.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Результат использования flex-макета

По умолчанию каждый flex-элемент растягивается в пределах ширины родительского элемента. Именно это и произошло с кнопкой, представленной на предыдущем рисунке. Для того чтобы избежать этой неприятности, нужно настроить свойство align-self :

Вот как кнопка будет выглядеть после этого.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Кнопка выглядит гораздо лучше

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Кнопка, растянутая по высоте

Задавая выравнивание кнопки относительно центра контейнера, мы решаем проблему. Вот как теперь будет выглядеть тот же пример.

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Решение проблемы растянутой кнопки

Использование единиц измерения em

Единицу измерения em можно использовать для правильной настройки размеров кнопок. Эта единица измерения в такой ситуации весьма полезна. Единица измерения em равна font-size элемента ( px или rem ). Взглянем на следующий пример:

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

Кнопки разных размеров

А вот фрагменты CSS-кода, в котором используется единица измерения em :

Для кнопок разного типа нужно создать классы, в которых задаётся разный размер шрифта:

→ Вот пример использования подобных кнопок на CodePen

→ Вот моя статья на эту тему. Рекомендую с ней ознакомиться

Анимация и переходы

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

Итоги

Мне было очень приятно работать над этим материалом. Его написание заняло у меня больше года. Я счастлив от того, что он, наконец, опубликован. Надеюсь, вы нашли здесь что-то такое, что вам пригодится.

Уважаемые читатели! Известны ли вам какие-нибудь полезные способы работы с кнопками, которые остались за рамками этой статьи?

Источник

Удалить синюю рамку из кнопки CSS в пользовательском стиле в Chrome

вот как это выглядит перед щелчком (и как я хочу, чтобы он все еще выглядел после щелчка):

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

и это граница, которую я говоря о:

Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

15 ответов

просто добавьте это в свой css:

или в этом фрагменте:

подождите! Этому уродливому контуру есть причина!

прежде чем удалить этот уродливый синий контур, вы можете взять доступность на рассмотрение. По умолчанию этот синий контур размещается на фокусируемых элементах. Это позволяет пользователям с проблемами доступности фокусировать эту кнопку, вкладывая в нее вкладки. Некоторые пользователи не имеют двигательных навыков для использования мыши и должны использовать только клавиатуру (или другое устройство ввода) для компьютера взаимодействие. Когда вы удаляете синий контур, больше нет визуального индикатора того, какой элемент сфокусирован. Если вы собираетесь удалить синий контур, вы должны замените его другим типом визуальной индикации того, что кнопка сфокусирована.

возможное решение: затемнить кнопки при фокусировке

для приведенных ниже примеров синий контур Chrome был сначала удален с помощью button:focus

вот ваши основные кнопки загрузки как они выглядят обычно: Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

вот кнопки, когда они получают фокус: Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

здесь кнопки при нажатии: Как убрать border у button. Смотреть фото Как убрать border у button. Смотреть картинку Как убрать border у button. Картинка про Как убрать border у button. Фото Как убрать border у button

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

это не только для инвалидов пользователи

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

Я просто удаляю контур из всех тегов на странице, выбрав все и применяя контур: нет ко всему:)

в моем случае этой проблемы я должен был указать box-shadow: none

добавьте это в файл CSS.

используйте либо это:

или это если это не сработает:

это работает для меня (FF и Chrome, по крайней мере). Вместо ориентации на :focus состояние, просто цель :active состояние, и это удалит эстетически навязчивую подсветку в вашем браузере, когда пользователь нажимает ссылку. Но он все равно сохранит состояния фокуса, когда пользователь с ограниченными возможностями вкладок или shift-вкладок через страницу. Обе стороны счастливы. 🙂

для тех, кто использует Bootstrap и имеет эту проблему, они используют :active:focus, а также просто: active и: focus, поэтому вам понадобится:

надеюсь, спас кого-то некоторое время, выясняя, что один, ударился головой немного удивляясь, почему такая простая вещь не работает.

Источник

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *