Удаление границ кнопок в 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
. - Не забывайте про тестирование на различных устройствах и в разных браузерах.
Полезные материалы
- border – CSS: Каскадные таблицы стилей | MDN — подробная информация о свойстве
border
. - CSS Borders — узнайте больше про создание и управление рамками.
- Полное руководство по элементу Table | CSS-Tricks — поможет познать мир рамок, пусть и через пример с таблицей.
- border | CSS-Tricks — все о свойстве "border".
- WebAIM: CSS в действии – Невидимое содержимое специально для пользователей экранных дикторов — гарантия доступности для всех.
- Освоение основ CSS: Обстоятельное руководство — Smashing Magazine — вернемся к основам перед применением продвинутых приемов.