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

Как сделать рамку кнопки в css

  • автор:

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

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

Сама рамка устанавливается через универсальное свойство 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
  • Кнопки в Bootstrap 5
  • Создание кнопок

Как сделать рамку кнопки в css

aero

Написать в поддержку

headphone

Помощь онлайн

search

Проверить домен

key

Войти Валюта:

CSS: создание кнопки

calendar

14 июня

heart

13045

question

Комментариев: 0

О том, как создать кнопку в HTML, мы уже рассказывали. Теперь же рассмотрим, как это сделать при помощи таблицы стилей.

Для создания простой кнопки используйте тег :

height:60px;

border-color:#000080 #6A5ACD #8470FF #0000FF;

border-style:solid;

border-width:5px;

background:#4682B4;

cursor:pointer;

Кнопка в браузере:

Рассмотрим таблицу стилей, в которой прописаны эффекты наведения на кнопку, где :hover отвечает за отображение кнопки при наведении, :active 一 при нажатии, а :focus 一 после нажатия:

border-color:#7CFC00 #7CFC00 #7CFC00 #7CFC00;

border-style:solid;

border-width:5px;

background:#FFFF99;

background:#ddd;

border-color:#ddd #333 #333 #ddd;

border-style:solid;

border-width:5px;

background:#228B22;

border-color:#ddd #333 #333 #ddd;

border-style:solid;

border-width:5px;

Кнопка в браузере:

soc-1

Также рекомендуем почитать:

CSS: стилизация цитат Как подключить CSS к HTML CSS: свойства шрифта CSS: текстовые эффекты CSS: свойства цвета и фона CSS: создание горизонтального меню CSS: работа с блоками

  • Блог
  • Хостинг, домены, мировые новости, обзоры ПО
  • Рейтинги, обзоры, отзывы
  • Наши новости, акции, нововведения
  • Руководства, статьи, инструкции
  • RSS

Популярное в категории

blog-img-1

calendar

Июнь

heart

82335

blog-img-1

calendar

Июнь

heart

77392

blog-img-1

calendar

Октябрь

heart

58247

blog-img-1

calendar

Март

heart

45488

blog-img-1

calendar

Сентябрь

heart

39355

Как убрать рамку вокруг button, input и некоторых других элементов в Firefox? [дубликат]

В Chrome все работает, а вот Firefox наотрез отказывается принимать этот код.

Отслеживать

48.9k 17 17 золотых знаков 56 56 серебряных знаков 100 100 бронзовых знаков

задан 4 янв 2017 в 8:13

774 4 4 золотых знака 9 9 серебряных знаков 19 19 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

button::-moz-focus-inner

Отслеживать

ответ дан 4 янв 2017 в 8:23

3,416 1 1 золотой знак 10 10 серебряных знаков 18 18 бронзовых знаков

Спасибо. Заработало

4 янв 2017 в 8:28

Данная проблема может возникнуть и на input’ах. При этом, блоки могут иметь еще и лишний отступ. Поэтому надежнее будет написать так:

// Remove border and padding in Firefox ::-moz-focus-outer, ::-moz-focus-inner

Отслеживать

ответ дан 4 янв 2017 в 8:29

MobiDevices MobiDevices

7,309 5 5 золотых знаков 27 27 серебряных знаков 71 71 бронзовый знак

А padding зачем?

4 янв 2017 в 8:31

@Yuri я все расписал.

4 янв 2017 в 8:31

  • css
  • firefox
    Важное на Мете
Связанные
Похожие

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Дизайн кнопок веб-сайта: руководство по CSS. Часть 2

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

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

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

CSS дизайн кнопки

Ниже мы рассмотрим несколько важных свойств, которые помогут вам изменить внешний вид вашей кнопки в CSS. С помощью этого кода вы можете создать стандартную синюю кнопку, которую в дальнейшем можно отредактировать и настроить под себя.

Цветные кнопки

Используйте свойство background-color , чтобы изменить цвет фона вашей кнопки.

Закругленные углы

Используйте свойство border-radius , чтобы изменить радиус границы для закругления ваших кнопок — чем больше количество пикселей, тем больше закруглены углы.

Цветные границы

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

Кнопки с наведением

Используйте селектор hover , чтобы изменить стиль вашей кнопки при наведении курсора, а также свойство transition-duration , чтобы изменить эффекта наведения.

Тени

Используйте свойство box-shadow , чтобы добавить тень вашей кнопке.

Отключение кнопки

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

Инструменты для создания кнопок

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

1. Wix

Wix — это платная платформа CMS, которая упрощает веб-дизайн, благодаря красивым и интуитивно понятным функциям. С помощью Wix вы с легкостью можете создать единообразные по стилю кнопки.

2. Best CSS Button Generator

Best CSS Button Generator — это бесплатный инструмент, который позволяет настраивать внешний вид кнопок вашего сайта. Вам нужно просто выбрать цвет, форму и тени кнопки, далее нажать «Получить код», вставить его в поле «Настроить дополнительный CSS» на своем веб-сайте и кнопка готова.

3. CSS Button Generator

CSS Button Generator — еще одна платформа для создания кнопок на вашем веб-сайте. В ней есть все необходимые инструменты, которые позволят вам создать функциональные и привлекательные кнопки.

&copy 2024 BINN. Все права защищены Условия передачи информации
Подписка оформлена
Отправить заявку
Ваша заявка успешно отправлена.
Мы свяжемся с вами в ближайшее время.

Условия передачи информации

Я даю согласие OOO «ЭсБилдер» (далее «BINN») на обработку моих персональных данных в соответствии со статьями 6, 9, 10, 18 Федерального закона от 27 июля 2006 года № 152-ФЗ «О персональных данных», указанных в онлайн-форме и/или предоставленных мною с целью:

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

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

Настоящее согласие применяется в отношении обработки следующих данных: имя, номер телефона, адрес электронной почты (E-mail).

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

Согласие может быть отозвано мною в любой момент путем направления в BINN подписанного мною письменного заявления.

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

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