Удаление границ кнопок в CSS: только картинка на кнопке

Быстрый ответ

Если вам нужно быстро убрать рамку у кнопок, примените следующий CSS-код:

button { 
    border: none; /* Не нужно стилизовать рамку */
    padding: 0; /* Без внутренних отступов */
    background: none; /* Сделаем фон прозрачным */
}

Этот код отключает стандартное форматирование кнопки для свойств border, padding и background, тем самым предоставляя вам больше пространства для вашего собственного стиля оформления.

Дополнительные параметры настройки

Для удаления контурной рамки, появляющейся при фокусировке на кнопку, используйте:

button:focus { 
    outline: none; /* Убираем контур рамки */
}

Еще один способ убрать рамку, но уже прямо из HTML:

<input type="button" style="border: none;">

Если же требуется применить стиль для всех input с типом "button":

input[type="button"] { 
    border: none; /* Без рамок */
    outline: none; /* И без контуров */
}

Если вам нужна еще большая гибкость при стилизации, оберните кнопку в элемент <div>.

Искусство создания кнопок с пользовательскими изображениями

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

button {
    padding: 0; /* Никаких отступов */
    border: none; /* Без рамки */
    background: transparent; /* Устанавливаем прозрачный фон */
    outline: none; /* Убираем контур */
}

Теперь ваша кнопка с индивидуальным оформлением будет свободна от нежелательных декоративных элементов.

Визуализация кнопок и рамок

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

Обычная кнопка:      Без рамки:
|============|        |  Нажми!  |   
|   Нажми!   |   
|============|

Удивительно, как просто можно исчезнуть рамке – была и вот ее нет.

забота о доступности

Стиль минимализма популярен, но нельзя забывать про доступность:

button {
    padding: 10px 20px; /* Удобный размер */
    color: #FFF; /* Яркий белый */
    background-color: #007BFF; /* Чистое небо в качестве фона */
}

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

button:focus {
    box-shadow: 0 0 0 3px rgba(0,123,255,.5); /* Создаем эффект голубого свечения */
}

Добавление изюминки

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

• Если нужен полностью прозрачный фон, используйте background: transparent;.

• Псевдо-классы :hover и :active можно использовать для создания эффекта взаимодействия с кнопкой:

  CSS

  Скопировать код

  button:hover {
      box-shadow: 0 0 5px rgba(0,0,0,.3); /* Тень при наведении */
  }
  
  button:active {
      box-shadow: 0 0 3px rgba(0,0,0,.5) inset; /* Эффект нажатой кнопки при клике */
  }

  Запустить код
• Режим “сложной творчества” включается с помощью псевдоэлементов ::before и ::after.
• Не забывайте про тестирование на различных устройствах и в разных браузерах.

Полезные материалы

1. border – CSS: Каскадные таблицы стилей | MDN — подробная информация о свойстве border.
2. CSS Borders — узнайте больше про создание и управление рамками.
3. Полное руководство по элементу Table | CSS-Tricks — поможет познать мир рамок, пусть и через пример с таблицей.
4. border | CSS-Tricks — все о свойстве "border".
5. WebAIM: CSS в действии – Невидимое содержимое специально для пользователей экранных дикторов — гарантия доступности для всех.
6. Освоение основ CSS: Обстоятельное руководство — Smashing Magazine — вернемся к основам перед применением продвинутых приемов.