Как убрать рамку у кнопки css
Перейти к содержимому

Как убрать рамку у кнопки css

  • автор:

Убрать рамки у кнопки — Вопросы по CSS

Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.

В Joomla Extensions Directory появился тег совместимости с Joomla 5.

Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��

JoomlaDay Spain, Madrid.

В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.

Как убрать обводку у кнопки css

Чтобы у элемента button убрать обводку, достаточно выставить свойство border в none. Чтобы исключить появление обводки у кнопки при нажатии, или при переходе на неё с помощью табуляции с клавиатуры необходимо использовать псевдо-классы:

button, button:active, button:focus  border:none; > 

Как убрать рамку у кнопок?

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

Сама рамка устанавливается через универсальное свойство border, оно одновременно определяет толщину рамки, её стиль и цвет. Соответственно, чтобы у кнопки убрать рамку есть три способа:

  • задать нулевую толщину рамки;
  • указать стиль рамки как none или hidden ;
  • установить прозрачный цвет рамки.

Толщина рамки

Используем свойство border-width с нулевым значением или универсальное border (пример 1).

Пример 1. Нулевая толщина рамки

Стиль рамки

За стиль рамки отвечает свойство border-style или, опять же, универсальное border . В качестве значения указываем none или hidden (пример 2).

Пример 2. Меняем стиль рамки

Значения none и hidden дают одинаковый результат, но имеют небольшие отличия, которые проявляются только при создании линий в таблицах. Для кнопок эти значения равнозначны.

Прозрачный цвет

В CSS для прозрачного цвета зарезервировано ключевое слово transparent . Так что для рамки пишем свойство border-color или border с этим значением.

Прозрачный цвет рамки удобно задавать в ситуациях, когда рамка меняет свой цвет при наведении на кнопку курсора мыши или при щелчке по кнопке (пример 3).

Пример 3. Цвет рамки

В данном примере сперва задаём параметры рамки, но делаем её прозрачной через transparent . Затем в псевдоклассе :hover устанавливаем желаемый цвет рамки, который будет проявляться при наведении на кнопку.

См. также

  • border-bottom-color
  • border-color
  • border-left-color
  • border-right-color
  • border-top-color
  • Атрибуты
  • Граница в CSS
  • Кнопки
  • Кнопки
  • Кнопки в Bootstrap 4
  • Создание кнопок

mih777777 / style.css

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

button ,
button : active ,
button : focus
outline : none;
>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Footer

© 2023 GitHub, Inc.

You can’t perform that action at this time.

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

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