css — Как сверстать кнопку с эффектами наведения и нажатия?
Вопрос задан
Изменён 9 лет 7 месяцев назад
Просмотрен 17k раз
Как можно сверстать кнопку с эффектами наведения и нажатия? На картинке первое изображение по умолчанию, второе при наведении, третье при нажатии.
Проблема в следующем. Во-первых, изображение с прозрачным фоном, и если вставлять его фоном кнопки, то прозрачный фон заменяется белым фоном. Также непонятно, как сделать эффекты наведения и нажатия на кнопке.
Если делать дивом, то проблема в том, что картинка будет загружаться при наведении, то есть пользователь не сразу видит, что картинка поменялась при наведении.
Эта кнопка используется для отправки формы.
Как можно её лучше реализовать?
Ещё можно ли, чтобы текст на кнопке был текстом, а не картинкой?
Заранее спасибо.
1
Во-первых сохраняйте картинку не в jpg, а в png c прозрачностью, тогда никакого белого фона не будет. Во-вторых сохраните её именно в таком вариант, в котором вы нам показали ( так называемый sprite ).
Сделайте ссылку блочной и задайте ей ширину и высоту одной из трёх картинки вашего спрайта. Укажите background: url(../sprite.png) 0 0 no-repeat; и по умолчанию будет выводится первая картинка. Чтобы менять картинки при наведении и нажатии, достаточно в стилях прописать что-то типа:
.button {
display: block;
width: 100px;
height: 30px;
background: url(../sprite.png) 0 0 no-repeat;
color: #fff;
text-align: center;
line-height: 30px; }
.button:hover {
background-position: 0 -32px; /* координаты нашей второй картинки*/
}
.button:active {
background-position: 0 -64px; /* координаты нашей второй картинки*/
}
Как видите текст я сделал белым и выровнял по центру по ширине и высоте.
Для этого наши картинки нужно сохранить без текста.
P.s. Т.к. фоны для кнопок у нас одной картинкой, то она сразу загрузится и при манипуляциях с кнопкой (:hover, :active ) фона будут меняться мгновенно.
3
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Оформляйте стили наведения, фокуса и активного состояния по-разному / Хабр
В течение многих лет я оформлял состояния элементов :hover, :focus и :active одинаково.
Вот пример кода, который всегда использовал.
.selector {
&:hover,
&:focus,
&:active {
...
}
}
Когда я стал уделять больше внимания доступности интерфейса при работе с клавиатуры (состоянию фокуса в частности), пришел к выводу, что мы не должны одинаково стилизовать разные состояния элементов.
Наведение, фокус и активное состояние должны стилизоваться по-разному.
Причина проста: Это разные состояния!
Сегодня я хочу продемонстрировать вам волшебный способ оформить все три состояния без особых усилий.
Давайте начнём с :hover.
Стилизация наведения (:hover)
:hover срабатывает, когда пользователь наводит на элемент курсор мыши.
Обычно это состояние заключается в изменении цвета фона background-color и/или текста color.
Различия не обязательно должны быть очевидными, потому что пользователи и так знают, что навели курсор на какой-то элемент.
button {
background-color: #dedede;
}
button:hover {
background-color: #aaa;
}
Стилизация фокуса (:focus)
:focus срабатывает, когда элемент получает фокус. Это достигается двумя способами:
- при выборе элемента кнопкой «Tab»
- при щелчке на элемент мышью
К фокусным элементам относятся:
- Ссылки (
<a>) - Кнопки (
<button>) - Элементы формы (
<input>,<textarea>и т.д) - Элементы с атрибутом
tabindex
Следует помнить о некоторых важных моментах:
- Пользователи не могут выбрать кнопкой «Tab» элемент с атрибутом
Клик вызывает состояние фокуса. - В браузерах Safari и Firefox Mac OS клик не вызывает фокус у элементов
<button> - При клике на ссылку <a>, фокус остаётся на ней, пока нажата кнопка мыши. Когда вы отпускаете кнопку, фокус перенаправляется в другое место, если в атрибуте
hrefуказан существующий на этой же страницеid
Клик вызывает состояние фокуса.Стилизуя состояние фокуса, мы больше заботимся о пользователях, работающих с интерфейсом с клавиатуры, чем о тех, кто использует мышь.
Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.
В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:
- Добавление обводки (outline)
- Создание анимаций
- Изменение
background-color - Изменение
color
background-color и color часто производится при :hover, имеет смысл состояние :focus оформлять с помощью обводки или анимации.
Вы можете использовать комбинации свойств outline, border и box-shadow для создания интересных стилей фокуса. Как это можно сделать, я описал в статье «Creating a custom focus style».
button {
background-color: #dedede;
}
button:hover {
background-color: #aaa;
}
button:focus {
outline: none;
box-shadow: 0 0 0 3px lightskyblue;
}
Стилизация активного состояния (:active)
При взаимодействии с чем-то в реальной жизни, вы ожидаете своего рода отклик. Например, при надавливании на кнопку, вы ожидаете, что она нажмётся.
На веб-сайтах этот отклик также полезен. Можно стилизовать момент «нажатия кнопки» с помощью :active. Вызывается это состояние, когда вы взаимодействуете с элементом. Под взаимодействием в данном случае подразумевается:
- Удержание левой кнопки мыши на элементе (даже когда он не в фокусе)
- Удержание кнопки пробела (на кнопках)
button:active {
background-color: #333;
border-color: #333;
color: #eee;
}
Две особенности, которые следует принять к сведению:
- Удержание пробела вызывает состояние
:activeу кнопок (<button>), но при удержании Enter этого не происходит - Enter запускает ссылки но не вызывает активное состояние. Пробел не запускает ссылки вообще
Пробел не запускает ссылки вообщеСтили ссылок по умолчанию
Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными
Взаимосвязь между :active и :focus
При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.
Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.
Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.
Для ссылок:
- При удержании левой кнопки мыши в Firefox и Chrome вызываются состояния
:activeи:focus. В Safari – только состояние:active(проверено только на Mac OS) - Если отпустить кнопку мыши,
:focusостаётся на ссылке (если атрибутhrefне ссылается наidна этой же странице). В Safari фокус возвращается на <body>
В Safari фокус возвращается на Для кнопок:
- Когда вы удерживаете левую кнопку мыши: оба состояния
:activeи:focusвызываются только в Chrome. Состояние:focusсовсем не вызывается в Safari и Firefox (Mac). Я написал про это странное поведение здесь.
Если нужно, чтобы клики вызывали фокус для кнопок, нужно как можно раньше добавить этот JavaScript (для чего это нужно, можно прочитать в статье, ссылку на которую я указал выше).
document.addEventListener('click', event => {
if (event.target.matches('button')) {
event.target.focus()
}
})
Добавление этого кода изменит поведение нажатия кнопок на следующее:
- При удержании кнопки мыши,
:activeвызывается во всех браузерах,:focusтолько в Chrome - Если отпустить кнопку мыши, вызывается
:focusв Safari и Firefox (Mac OS). :focusостаётся на кнопке во всех браузерах
Поведение кнопок в Safari после добавления фрагмента JS-кода
Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх
Волшебная комбинация
Волшебная комбинация позволяет пользователям получать отклик, когда они наводят, фокусируются или взаимодействуют с элементом. Вот код, который вам нужен:
.element:hover,
.element:active {
/* Изменить цвет фона/текста */
}
.element:focus {
/* Показать обводку */
}
Для пользователей мыши:
- Когда пользователь наводит на элемент, меняется
background-color(и/илиcolor). Происходит отклик. - Когда пользователь кликает на элемент, показывается обводка фокуса. Происходит отклик.
Для пользователей клавиатуры:
- Когда пользователь выбирает элемент кнопкой Tab, показывается обводка фокуса. Происходит отклик.
- Когда они взаимодействуют с элементом, меняется
background-color(и/илиcolor). Происходит отклик.
Происходит отклик.Лучшее из обоих миров!
- Я не проверял тщательно магическую комбинацию.Это лишь аргумент в пользу этой концепции концепции. Буду признателен, если вы поможете мне проверить её и дадите знать о возможных проблемах.
- Если будете проверять, не используйте Codepen. Состояние фокуса для ссылок в Codepen ведёт себя очень странно. Если навести курсор на ссылку, обводка фокуса удалится. Почему? Я не знаю. Порой мне кажется, что лучше всего проверять подобные вещи без использования дополнительных инструментов. Просто старые добрые HTML, CSS, JS.
Не волшебная (но может даже лучше) комбинация
Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает.
Но не идеально.
Вот что произойдёт в Safari и Firefox на Mac OS:
- Когда пользователь держит кнопку мыши нажатой, ничего не меняется
- Когда пользователи отпускают кнопку, элемент получает фокус
Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.
Но если вы считаете такое поведение недостаточно доступным, может возникнуть желание стилизовать состояния :hover, :focus и :active по отдельности.
.element:hover {
/* Изменить цвет фона/текста */
}
.element:active {
/* Иные изменения в цвете фона и текста */
}
.element:focus {
/* Показать обводку */
}
Поведение кнопки в Safari, если были стилизованы все три состояния
Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.
html — Как оформить нажатую кнопку в CSS
спросил
Изменено 5 лет, 10 месяцев назад
Просмотрено 428 тысяч раз
Я просмотрел веб-сайт W3 Schools W3Schools, где объясняется, как стилизовать кнопки с помощью CSS.
Мне нужно указать стиль кнопки при нажатии. Что такое селектор псевдокласса для этого? например кнопка наведения:
.кнопка:наведите{
}
- HTML
- CSS
5
Сначала эта кнопка будет желтой. При наведении он становится оранжевым. Когда вы нажмете на нее, она станет красной. Я использовал :hover и :focus для адаптации стиля.
(Селектор :active обычно используется для ссылок (т.е. тегов ))
button{
цвет фона: желтый;
}
кнопка: наведите курсор {фоновый цвет: оранжевый;}
кнопка: фокус {цвет фона: красный;}
а {
оранжевый цвет;
}
кнопка{
цвет:зеленый;
текстовое оформление: нет;
}
а: посетил {
цвет: фиолетовый;
}
а: активный {
цвет синий;
} <кнопка> Наведите и нажмите!
Здравствуйте
Пока
5
Если вы просто хотите, чтобы кнопка имела другой стиль при нажатии мыши, вы можете использовать псевдокласс :active .
.кнопка: активная {
}
Если, с другой стороны, вы хотите, чтобы стиль оставался после нажатия, вам придется использовать javascript.
Есть три состояния кнопки
- Нормальный: Вы можете выбрать, как это
кнопка - Hover: Вы можете выбрать вот так кнопку
: hover - Нажатие/щелчок: Вы можете выбрать, как эта кнопка
: активна
Обычный:
.кнопка
{
//ваш css
}
Активный
.button:активный
{
//ваш css
}
Наведение
.кнопка:наведение
{
//ваш css
}
SNIPPET:
Используйте :active для стилизации активного состояния кнопки.
кнопка:активна{
цвет фона: красный;
} К сожалению, нет псевдоселектора :click. Если вы хотите изменить стиль при нажатии, вы должны использовать Jquery/Javascript.
Это уж точно лучше, чем «халтурить» на чистом HTML/CSS. Но если вы настаиваете…
ввод {
дисплей: нет;
}
охватывать {
отступ: 20 пикселей;
семейство шрифтов: без засечек;
}
ввод: проверено + диапазон {
фон: #444;
цвет: #fff;
} <метка для = "ввод">
<тип ввода = "радио" />
НЕТ стилей JS
Или, если хотите, вы можете переключить стиль:
ввод {
дисплей: нет;
}
охватывать {
отступ: 20 пикселей;
семейство шрифтов: без засечек;
}
ввод: проверено + диапазон {
фон: #444;
цвет: #fff;
} <метка для = "ввод">
<тип ввода = "флажок" />
НЕТ стилей JS
2
button:hover — это когда вы наводите курсор на кнопку.
Вместо этого попробуйте button:active … будет работать и для других элементов
button:active{
красный цвет;
} 20 Эффекты нажатия кнопок CSS
Коллекция отобранных вручную бесплатных HTML и CSS эффектов нажатия кнопок примеров кода из codepen и других ресурсов.
Обновление коллекции за февраль 2019 года. 6 новых предметов.
- Кнопки CSS
- CSS эффекты наведения на кнопку
- 3D-кнопки CSS
- Кнопки отправки CSS
- Кнопки градиента CSS
- Плоские кнопки CSS
- Кнопки закрытия CSS
- Кнопки загрузки CSS
- Кнопки воспроизведения/паузы CSS
- Библиотеки кнопок CSS
О коде
Тонкая кнопка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Эффект пульсации нажатия кнопки
Чистый стиль кнопки CSS. Пульсирующий эффект при клике без JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Эффект нажатия кнопки копирования
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопка растягивания пользовательского интерфейса из материала
Delightful Material UI Растягивающая кнопка построенная путем обрезки контуров.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
О коде
Скошенные пуговицы из SCSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Кнопка пульсации с небольшим количеством JavaScript
Простая ретро-кнопка рябь с несколькими кодами Javascript для более плавной анимации.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
О коде
Кнопка с волновым эффектом только для CSS
Кнопка-переключатель только для CSS с динамическим инверсным цветом текста. Анимированный радиальный градиент достигается путем масштабирования псевдоэлемента, который находится перед текстом. Цвет динамического текста использует смешанный режим: разница .
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
О коде
Сладкий микс для маленьких пуговиц
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
О коде
Черная кнопка входа в биометрию
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Кнопка «Удалить» с микровзаимодействиями
Игра с микровзаимодействиями, добавление микровзаимодействий на кнопку удаления/значок корзины .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Кнопка «Добавить в коллекцию»
Простая анимация, например, если вы добавляете что-то в коллекцию.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Пузырьковая кнопка с анимацией щелчка
Создал пузыри, используя radial-gradient for background-image . Это свойство настолько круто, что вы можете рисовать многие вещи без добавления дополнительных div или псевдоэлементов ( ::before и ::after )
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Ретро-кнопки с пользовательскими свойствами
Игра с пользовательскими свойствами CSS.
О коде
Анимация с волновым эффектом
Анимация с эффектом пульсации с помощью CSS и ES6.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
О коде
Нажмите кнопку CSS
Простой нажмите кнопку в HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Анимация кнопок со смещенными путями CSS
Кнопка с анимированными вылетающими точками, которые перемещаются по смещенному пути (ранее известному как пути движения CSS).
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Анимация страницы нажатия кнопки
Переход кнопки, который можно использовать с barba.js для анимации перехода страницы.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Эффект нажатия кнопки
Кнопка в HTML и CSS с эффектом клика.