	`: парение`	`: фокус`	`: активный`
Мышь 🐭	Есть	Есть	Есть
Клавиатура ⌨️	Нет	Есть	Есть
Сенсорный экран 📱	Да (по щелчку)	Да * (при нажатии)	Да * (при нажатии)

Css кнопка при наведении меняет цвет: html — Цвет кнопки при наведении, отличный от класса в css

Содержание

Псевдокласс :hover | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	4.0+	1.0+	1.0+

Краткая информация

Версии CSS

Описание

Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

Синтаксис

элемент:hover { … }

Значения

Нет.

Пример 1

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>hover</title>
  <style>
   a:link {
    color: #0000d0; /* Цвет ссылок */
    padding: 2px; /* Поля вокруг текста */ 
   }
   a:hover {
    background: #786b59; /* Цвет фона под ссылкой */ 
    color: #ffe; /* Цвет ссылки */ 
   } 
  </style>
 </head>
 <body>
  <p><a href="1.html">Ссылка 1</a></p>
  <p><a href="2.html">Ссылка 2</a></p>
  <p><a href="3.html">Ссылка 3</a></p> 
 </body>
</html>

В данном примере псевдокласс :hover применяется к ссылке (тегу <a>), при этом меняется цвет ссылки и фона под ней. Результат примера показан на рис. 1.

Рис. 1. Результат использования псевдокласса :hover для ссылок

Пример 2

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>hover</title>
  <style>
   ul {
    width: 180px; /* Ширина меню */
    list-style: none; /* Для списка убираем маркеры */
    margin: 0; /* Нет отступов вокруг */
    padding: 0; /* Убираем поля вокруг текста */
    font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
    font-size: 10pt; /* Размер названий в пункте меню */
   }
   li ul {
    position: absolute; /* Подменю позиционируются абсолютно */
    display: none; /* Скрываем подменю */
    margin-left: 165px; /* Сдвигаем подменю вправо */
    margin-top: -2em; /* Сдвигаем подменю вверх */
   }
   li a {
    display: block; /* Ссылка как блочный элемент */
    padding: 5px; /* Поля вокруг надписи */
    text-decoration: none; /* Подчеркивание у ссылок убираем */
    color: #666; /* Цвет текста */
    border: 1px solid #ccc;/* Рамка вокруг пунктов меню */
    background-color: #f0f0f0; /* Цвет фона */
    border-bottom: none; /* Границу снизу не проводим */
   }
   li a:hover {
    color: #ffe; /* Цвет текста активного пункта */
    background-color: #5488af; /* Цвет фона активного пункта */
   }
   li:hover ul { 
    display: block; /* При выделении пункта курсором мыши отображается подменю */
   }
   .brd {
    border-bottom: 1px solid #ccc; /* Линия снизу */
   }
  </style>
 </head>
 <body>
  <ul>
   <li><a href="russian.html">Русская кухня</a>
    <ul> 
     <li><a href="linkr1.html">Бефстроганов</a></li> 
     <li><a href="linkr2.html">Гусь с яблоками</a></li> 
     <li><a href="linkr3.html">Крупеник новгородский</a></li> 
     <li><a href="linkr4.html">Раки по-русски</a></li> 
    </ul> 
   </li> 
   <li><a href="ukrainian.html">Украинская кухня</a> 
    <ul> 
     <li><a href="linku1.html">Вареники</a></li> 
     <li><a href="linku2.html">Жаркое по-харьковски</a></li> 
     <li><a href="linku3.html">Капустняк черниговский</a></li> 
     <li><a href="linku4.html">Потапцы с помидорами</a></li> 
    </ul> 
   </li>
   <li><a href="caucasus.html">Кавказская кухня</a> 
    <ul> 
     <li><a href="linkc1.html">Суп-харчо</a></li> 
     <li><a href="linkc2.html">Лилибдж</a></li> 
     <li><a href="linkc3.html">Чихиртма</a></li> 
     <li><a href="linkc4.html">Шашлык</a></li> 
    </ul> 
   </li> 
   <li><a href="asia.html">Кухня Средней Азии</a></li> 
  </ul>
 </body>
</html>

В данном примере псевдокласс :hover добавляется к элементу списка (тег <li>) для создания двухуровневого меню. Результат примера показан на рис. 2.

Рис. 2. Использование :hover для создания меню

Браузеры

В браузере Internet Explorer до версии 6.0 включительно псевдокласс :hover работает только для ссылок.

Оформляйте стили наведения, фокуса и активного состояния по-разному / Хабр

В течение многих лет я оформлял состояния элементов :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» элемент с атрибутом tabindex="-1", но могут кликнуть по нему мышью. Клик вызывает состояние фокуса.

В браузерах 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>

Для кнопок:

Когда вы удерживаете левую кнопку мыши: оба состояния :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, если были стилизованы все три состояния

Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.

20 удивительных анимированных кнопок на чистом CSS

источник: 20 Amazing Pure CSS Animated Buttons

автор: Brenda Stokes Barron The Digital Inkwell

Вступление

Если вы хотите придать своему веб-сайту немного больше изящества, вам наверняка захочется исследовать и использовать анимированные кнопки CSS. Эти части кода добавляют слой интерактивности вашему сайту, который оценят большинство посетителей сайта. Кроме того, их можно использовать для придания ощущения динамики и дальнейшей помощи в укреплении вашего бренда. Ниже приведен список из 20 различных анимированных кнопок CSS, которые вы можете добавить на свой сайт с помощью довольно простого CSS.

1. Stylish Animated CSS Buttons for Bloggers

See the Pen
Stylish Animated CSS Buttons For Blogger. by Prio-Soft™ (@priosoft)
on CodePen.

Этот набор стильных анимированных кнопок CSS идеально подходит для использования блоггерами. Они предлагают широкий спектр эффектов при наведении курсора, от прокручивания цвета по кнопке слева направо (и наоборот), сверху вниз, что подчеркивает контур кнопки, и многое другое.

Stylish Animated CSS Buttons for Bloggers.

2. Animated CSS Buttons

See the Pen
animated-css-buttons by Naved khan (@Navedkhan012)
on CodePen.

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

Animated CSS Buttons.

3. More Animated CSS Buttons

See the Pen
Animated CSS Buttons by an (@annguyn)
on CodePen.

Этот набор кнопок CSS очень прост, но именно это делает их привлекательными. Если вы хотите добавить немного интерактивности на свой сайт, это безопасная ставка.

More Animated CSS Buttons

4. CSS3 Buttons

See the Pen
css 3 buttons by Oleg Semenov (@wemonsh)
on CodePen.

Теперь эти кнопки CSS3 предлагают классные эффекты перехода. Некоторые заполняются цветом при наведении, но другие развивают эффект падающей тени, который заставляет кнопки казаться оторванными от экрана.

CSS3 Buttons

5. Simple CSS Buttons Animation

See the Pen
Simple CSS buttons animation by Michael Domanych (@mhouse)
on CodePen.

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

Simple CSS Buttons Animation

6. CSS + SVG Button Animation

See the Pen
CSS + SVG Button Animation by Clément (@clmntclmnt)
on CodePen.

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

CSS + SVG Button Animation.

7. Animation with Cubic Bezier

See the Pen
animation with cubic bezier by Franca (@franca_)
on CodePen.

Эта забавная кнопка добавит настоящий стиль любому веб-сайту. Когда вы наводите курсор на кнопку, текст внутри нее меняет цвет.

Animation with Cubic Bezier.

8. Pure CSS Button

See the Pen
Pure CSS Button (animation with clip-path) by Marco Antônio (@thismarcoantonio)
on CodePen.

Эта кнопка немного отличается от остальной части этого списка. Он имеет путь обрезки, благодаря которому при наведении курсора на текст кнопки анимация круга скользит по стрелке, превращая заостренный конец в точку.

Pure CSS Button

9. Blobs Button

See the Pen
Blobs button by Hilary (@hilwat)
on CodePen.

Как следует из названия, кнопка Blobs заполняется разноцветными каплями при наведении курсора. Это отличный выбор для тех, кто хочет добавить немного прихоти или веселья на свои сайты.

Blobs Button

10. Simple CSS Button Hover Effects

See the Pen
Simple CSS Button Hover Effects by Natalia Reshetnikova (@natalia-reshetnikova)
on CodePen.

Вот еще один набор довольно заниженных анимированных кнопок, которые все еще могут оказать реальное влияние. Некоторые эффекты включают в себя растягивание текста кнопки, саму кнопку, разделяющуюся на X-образную форму, и изменение цвета.

Simple CSS Button Hover Effects.

11. CSS Button with Hover Effect

See the Pen
CSS Button With Hover Effect by Raj Kamal Chenumalla (@avvign)
on CodePen.

Вот еще одна кнопка, которая предлагает супер простой дизайн. При наведении у него развивается аура, которая быстро исчезает. Тонкий, но эффективный.

CSS Button with Hover Effect.

12. 100 Days CSS Button N 045

See the Pen
100 days css Button N° 045 by Vitor Siqueira (@vitor-siqueira)
on CodePen.

Эта простая кнопка имеет эффект, когда контур кнопки усиливается в цвете и преследует ее границу при наведении на нее курсора.

100 Days CSS Button N 045.

13. Pure CSS Buttons

See the Pen
Pure CSS Buttons by Ishaan Saxena (@ishaansaxena)
on CodePen.

Вот еще один набор супер простых кнопок CSS. Они заполняются цветом со всех сторон при наведении и могут использоваться как значки.

Pure CSS Buttons.

14. Auto Width CSS Button Flip

See the Pen
Auto Width Css Button Flip by Alex Moore (@MoorLex)
on CodePen.

Какой интересный вариант! Когда вы наводите курсор мыши на эту анимированную кнопку, она, кажется, наклоняется вперед, показывая другой текст на «обратной стороне» кнопки.

Auto Width CSS Button Flip.

15. Collection of Button Hover Effects

See the Pen
Collection of Button Hover Effects by David Conner (@davidicus)
on CodePen.

Here’s another set of animated CSS buttons that use fun hover effects to make a statement. Outline effects, fills, and color shifts make up the majority of the effects used here.

Collection of Button Hover Effects.

16. Pure CSS Button with Ring Indicator

See the Pen
Pure CSS Button with Ring Indicator by Cole McCombs (@mccombsc)
on CodePen.

Если вы хотите привлечь внимание к призыву к действию или чему-то в этом роде, эта кнопка может быть идеальным выбором. Он постоянно излучает кольцо из своего центра, обращая на него внимание. Затем, при наведении, кнопка подсвечивается и слегка поднимается.

Pure CSS Button with Ring Indicator

17. CSS3 Button Hover Effects with FontAwesome

See the Pen
CSS3 Button Hover Effects with FontAwesome by foxeisen (@foxeisen)
on CodePen.

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

CSS3 Button Hover Effects with FontAwesome

18. CSS3 3D Flip Button

See the Pen
CSS3 3d flip button by Sean Michael (@seansean11)
on CodePen.

В отличие от всех других кнопок в этом списке, 3D Flip Button CSS3 отображает эффект при нажатии на нее. Как только вы нажмете, кнопка свернется, чтобы показать новый текст и значки. Это отличный способ указать, что форма была отправлена, например.

CSS3 3D Flip Button

19. Button Fun

See the Pen
Button Fun by Jack Cuthbert (@JackCuthbert)
on CodePen.

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

Button Fun

20. Button Shine Effect

See the Pen
Button Shine Effect by Dan Mensinger (@dmensinger)
on CodePen.

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

Button Shine Effect.

🐓

Меняем цвет элемента по наведению мышки. Простой пример, простой CSS

В данной статье на примере показано, как сделать на произвольном элементе сайта смену цвета, если на него был наведен курсор мышки.

Делается данная «штука» при помощи стилей CSS, т.е. придется добавить несколько строчек текста в файл стилей шаблона, а так же проявить свои дизайнерские способности. Я подскажу что именно добавить.

Обновлено 17.01.2019

Внимание! Новый апдейт полностью заточенной под SEO + PageSpeed темы для сайта WP Romb — максимально быстро и максимально удобно. Настрой под себя уникальный дизайн за пару минут и собирай тысячи трафика. Всё на русском + обновления + техподдержка.

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

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

Вот так выглядит код данного блока:

<div> <a href=»https://mojwp.ru/category/birzi-ssylok»>Биржи ссылок</a> <a href=»https://mojwp.ru/category/plugins»>Все плагины WordPress</a> <a href=»https://mojwp.ru/category/poleznoe»>Всякие полезности</a> <a href=»https://mojwp.ru/category/ukrashenie»>Украшаем сайт</a> <a href=»https://mojwp.ru/category/hak»>Хаки WordPress</a> </div>

<div>

<a href=»https://mojwp.ru/category/birzi-ssylok»>Биржи ссылок</a>

<a href=»https://mojwp.ru/category/plugins»>Все плагины WordPress</a>

<a href=»https://mojwp.ru/category/poleznoe»>Всякие полезности</a>

<a href=»https://mojwp.ru/category/ukrashenie»>Украшаем сайт</a>

<a href=»https://mojwp.ru/category/hak»>Хаки WordPress</a>

</div>

В моем примере видим что эффект срабатывает на обычной ссылке. Вместо нее может быть контейнер <div>, <li> и прочие подходящие теги.

Чтобы сказать браузеру, что эффект нужно выполнять на конкретных ссылках, я взял их в отдельный <div>тут ссылки<div>. У вас это тоже может быть созданный вами контейнер, или уже готовый (например, виджет в сайдбаре).

Практика

Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше — делаем все при помощи стилей CSS (файл шаблона может называться style.css, css.css, core.css или еще как-то).

.catside a:hover {background: #0078BF; color: #fff;}

Данной строкой мы указали браузеру менять цвет заднего фона при наведении мышки на синий (#0078BF) и сказали что цвет шрифта должен стать белым (#fff). Сама «штука», позволяющая понять браузеру, что это нужно делать по наведению мышки — псевдокласс hover (о нем можно почитать ЗДЕСЬ).

Чуть понятнее: мы указали что ссылка a должна находиться внутри контейнера с классом .catside. Далее мы добавили псевдокласс hover и оформили по правилам CSS.

Послесловие

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

Использовать hover можно, практически, для всех элементов на сайте: блоки, текст, ссылки. Проявите немного фантазии и поймете как устроено у вас на сайте подобное. После этого сможете его украсить или сменить частично оформление.

Опять же о показанном примере: в нем не учитываются параметры оформления блока (отступы, размер шрифта, картинка и прочее). Это все можно узнать из моих предыдущих статей на блоге, либо воспользоваться консолью разработчика F12 в вашем браузере (как им пользоваться смотрите видео на моем канале YOUTUBE).

Замена кнопки submit в форме html

Цель:
Сегодня наша задача замена стандартной кнопки «отправить» на красивую. Кнопка выполняет отправку формы и имеет тип «submit». Можно конечно изменить тип с «submit» на «image» и добавить параметр «src», но наша задача на сегодня это оставить тип «submit» на месте и программно нарисовать красивую кнопку.

Применение:
Для чего это может понадобиться? Всё просто, для придания эстетичного вида той самой кнопке.
Вот для сравнения. Наглядно видно, что вторая кнопка смотрится лучше.

Решение:
Для выполнения данной цели как и говорилось мы будем применять «input» с типом «submit». Ещё нам понадобится описать новый класс в таблице стилей «*.css»
Вот код для html-файла:

<input type=»submit» name=»submit» value=»Оплатить» />

А вот и css:

.superbutton {

width:150px;

height:40px;

border-radius:20px;

background:#459DE5;

color:#fff;

font-size:18px;

cursor:pointer;

}

Украшаем:
Для украшения можно предложить изменять цвет фона кнопки при наведении. Как правило дизайнеры советуют менять цвет не кардинально, а всего лишь на тон светлее или темнее. Я при выполнении задачи предпочел затемнить кнопку. Для этого в css добавляем:

.superbutton:hover{

background:#358DE5;

}

Теперь кнопка ожила. На статичной картинке разность цветов не так заметна когда ты наводишь мышь и цвет в туже секунду меняется накладывая более темный оттенок.

Проблема рамки вокруг кнопки:
И всё вроде ничего и выглядит ничего и при наведении темнеет, но при нажатии мы видим ужасную рамку. Ещё эту рамку можно наблюдать если наша кнопка находится в фокусе, в том который по кнопке Tab перебирает элементы на странице.
Для этого мы пропишем в css ещё 2 псевдо класса, как и «hover». Это классы «active» который отвечает за вид при нажатии на кнопку и класс «focus» при фокусе на кнопке. Но есть одна особенность, так как у нас input и присвоенный ему класс, то active прописывать не обязательно.
Вот код:

. superbutton:focus{

outline:none;

}

Please enable JavaScript to view the comments powered by Disqus.

Ховер на карточках и плитках // Анимация в вебе

ПОПУЛЯРНЫЕ ПРИЕМЫ ХОВЕР ЭФФЕКТА ДЛЯ КАРТОЧЕК И ПЛИТОК

Улучшает читабельность текста на изображении при наведении

Акцентирует внимание на карточке, добавляет интерактивность

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

Добавит интерактивность и привлечет внимание зрителя

Делает карточку интерактивной, подходит для демонстрации товаров

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

Появление тени

Затемнение фильтра

Появление контента

Изменение масштаба

Смена изображения плитки

Смещение карточки

Правильный курсор на активных элементах

English language version:
“Correct Cursor on Active Elements”

На всех активных элементах по наведению должен меняться курсор. В большинстве случаев это будет cursor: pointer.

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

«Активными» такие элементы должны называться, когда нажатие на подобный элемент вызывает какое-либо действие. Таким образом, ведущий на текущую страницу пункт меню, выбранная радиокнопка или задизейбленные кнопки и ссылки — не активные элементы, и по наведению на них ничего не должно меняться.

Мне казалось, что это правило очевидно, однако, оказалось, что очень многие разработчики считают иначе. Внимательно прочитав все точки зрения, я так и не нашёл ни одного серьёзного аргумента против добавления смены курсора по ховеру всем активным элементам.

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

Преимущества использования

cursor:pointer

Обратная связь

Лично для меня основная польза от смены курсора — обратная связь. В идеале у кастомных элементов должно быть прописано состояние при наведении. Скажем, подсветка фона или смена цвета текста. Но в реальной жизни подобное изменение может или вовсе отсутствовать (дизайнер не нарисовал, а верстальщик не подумал), или быть не особо заметным, не привычным или срабатывать не моментально. Таким образом, обратной связи может или не быть, или она будет не совсем очевидна.

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

Изменение курсора — самая естественная, заметная и понятная обратная связь, которая может быть в интерфейсе.

Определение границ активной области

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

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

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

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

Аргументы против смены курсора

Как бы я ни искал, я не смог найти достойных аргументов против смены курсора над активными элементами. Большая часть найденных контраргументов можно описать фразой «не нужно ломать пользовательские привычки».

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

Дальше надо сразу отметить, что не все привычки полезные. Если идти на поводу у пользователей и давать им только то, к чему они привыкли, то прогресс остановится. Часто у пользователей формируются привычки, которые им только мешают. В качестве довольно яркого примера подобной привычки можно взять подписи к чекбоксам или радиокнопкам. Ленивые разработчики годами забывали связывать текст и соответствующие контролы, из-за чего пользователи обычно даже и не пытаются кликать на текст, тратя своё время и усилия на попытки попасть по маленьким областям контролов. Это отличный пример почему имеет смысл не просто связать контрол с лейблом, но и всеми доступными способами рассказать об этом пользователю.

Аргументы «по привычке» можно разделить на несколько категорий. Я попробую ответить на наиболее часто используемые аргументы против смены курсора над активными областями.

«В ОС используется обычный курсор»

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

Кстати, если говорить про десктоп, то стоит упомянуть и такой частую разновидность приложений как игры. В играх курсор почти всегда кастомный, и очень часто именно он меняется при наведении на различные активные области. Можно провести параллели между играми и веб-приложениями — и, действительно, в веб-приложениях всё чаще можно встретить использование различных специальных курсоров — для изменения размеров элементов или для их перетаскивания. Так почему же в этом случае другие активные элементы должны иметь стандартный курсор? Раз специального курсора для «кнопок», «селектов» или «чекбоксов» нет, то к кнопкам подойдёт cursor: pointer, ранее использовавшийся только для ссылок. Правда, случай с чекбоксами и радиокнопками немного особый: если вокруг них, с подписью, по ховеру меняется фон, то курсор-руку можно и не добавлять. Однако, надо не забыть сменить курсор для сопроводительного текста на default, ведь курсор-стрелка как раз чаще всего используется для выбора элементов. Но вот если выбор чекбокса или радиокнопки вызовет какие-то изменения на странице (скажем, раскрытие части аккордеона), можно добавить и курсор-руку для того, чтобы сказать пользователям о том, что «сейчас что-то произойдёт».

«Я вижу курсор — считаю это ссылкой»

Этот аргумент также встречается довольно часто. Раньше, когда веб-приложений ещё не было, все сайты были всего лишь связанные ссылками документы. В приложениях подобных связей почти не было, но в HTML соответствующий элемент пришлось добавить, и про него надо было как-то рассказать пользователям. Это сделали добавлением подчёркивания, синего цвета и курсора. При этом, для кнопок и прочих элементов использовались системные контролы, и никакого дополнительного поведения для них не добавили.

Шли годы, сайты становились всё насыщеннее, на страницах появлялись разные кастомные элементы, в том числе и ссылки, стилизованные под кнопки. И, в большинстве случаев, никто не убирал ссылочное поведение — и на таких кнопках смена курсора оставалась. Если сейчас посмотреть на большинство подобных кастомных кнопок, сделанных ссылками, на них всех осталось поведение ссылок.

«Ссылку можно открыть в новом окне и вызвать для неё контекстное меню»

Ну да — ссылка это не кнопка, а кнопка — не ссылка. Но из этого не следует, что поведение кнопок и ссылок по наведению должно отличаться.

Никто не будет ожидать у кнопок возможностей открыть в новом окне или скопировать адрес. В каждом случае и кнопка, и ссылка будут иметь свой контекст, в котором пользователи могут или ожидать поведения ссылки, или же этого не ожидать. Неважно какой будет в этом случае курсор — если пользователи увидят курсор в контексте ссылки (а многие дизайнеры сейчас чуть ли не всё рисуют в виде кнопок), они будет обращаться с ней как с ссылкой не задумываясь. И, наоборот, если там будет кнопка, а пользователи не будет ожидать ссылки, всё будет в порядке. Если они захотят прикрепить файл — их не смутит, что там, внезапно, курсор-рука. Если они захотят найти что-то через поисковую форму, их не смутит, что там на кнопке изменился курсор. Они просто на неё нажмут. Пользователи могут возмутиться разве что в случаях когда кнопка будет замаскирована под ссылку, не находясь при этом в контексте формы.

Дальше — больше. Очень часто можно встретить ссылки, которые не являются ссылками — я почему-то не слышал возмущений насчёт того, что у подобных псевдо-ссылок меняется по наведению курсор. Различные выпадушки, фильтры, раскрывашки катов, закрывающие крестики, ссылки «отмена» — на многих сайтах можно найти огромное число элементов с изменённым поведением, но везде на подобных элементах остаётся смена курсора по наведению. Почему бы в этом случае не добавить курсор к кнопке или селекту, чем они будет отличаться от всех этих элементов?

Кстати, вот отличный пример передового сервиса г+:

Если хотите, можете попробовать догадаться, какие из отмеченных цифрами элементов изначально являются ссылками, какие нет; у каких есть курсор-поинтер, а у каких — нет. И что вообще произойдёт если на тот или иной элемент навести курсор, а потом и нажать. Чуть позже я дам ответ, а пока продолжу.

Если прямолинейно говорить, что «всё, у чего есть href — должно иметь курсор-поинтер, а то, у чего нет — не должно», то могут возникнуть некрасивые противоречивые случаи: в разных местах визуально кнопкой может быть сделана и ссылка. Если у таких элементов будет различаться поведение по ховеру, то это будет смущать пользователей больше, чем если бы у них было любое, но одинаковое поведение. Другой случай — когда рядом находятся и кнопка (button или input), и псевдо-ссылка. Например, часто делают попапы с кнопкой «Ок» и ссылкой «отмена». Тут получается так, что у кнопки курсора нет, а у ссылки (которая ссылкой только притворяется) — курсор есть. Я считаю, что подобные неоднородности только мешают. Но из двух вариантов приведения к общему знаменателю кто выберет отсутствие курсора по ховеру у ссылки?

Теперь рассмотрим ситуацию с отключённым состоянием. Что, если мы задизейблим какую-то кнопку? Она перестанет нажиматься. А если задизейблим ссылку? По-хорошему, мы должны будем убрать и курсор. Представим: сначала пользователи сталкиваются с задизейбленной ссылкой без курсора, потом каким-то действием её раздизейбливают и видят сменившийся курсор. Потом где-то в интерфейсе пользователи видят кастомную серую кнопку без курсора — как в этом случае пользователям понять, что она не задизейбленна?

В итоге можно собрать множество примеров конфликтов кнопок, ссылок, их состояний и поведения. Подобные разногласия будут возникать только в случаях когда курсор меняется строго у элементов-ссылок, если же приравнять смену курсора к любой смене состояния (когда логично было бы менять фон/цвет/что-то ещё), то этих проблем не будет.

Вернёмся к иллюстрации из г+:

Итак, список с разъяснениями где какой элемент:

Пермалинк поста, ок. Ссылка есть, по наведению появляются подчёркивание и курсор.
Это вовсе не ссылка, просто текст 🙂
Это псевдоссылка, ссылки нет, по ховеру — и подчёркивание и курсор. По клику появится дропдаун.
Аналогично — просто контрол, без ссылки, по ховеру меняются цвет и курсор.
Опять не ссылка. В этом сниппете ссылкой являются только заголовок и картинка.
Тут и юзерпик, и имя — ссылки. Две, не связанные, но ведущие в одно место, на обеих меняется курсор по ховеру, у текста появляется подчёркивание.
Псевдоссылка — без хрефа. Как положено, появляется подчёркивание и меняется курсор.
Казалось бы — кнопка. По ховеру курсор не меняется, но — внезапно — появляется выпадушка. По ховеру.
Ок, допустим, «системный» элемент (хоть и кастомный) — кнопка — не имеет курсора. Но последним элементом тут обозначен чекбокс (который тоже, по той же логике, «системный») с подписью. Но тут, внезапно, хоть ссылки-то и нет, курсор по ховеру меняется. Плюс еле заметно подсвечивается чекбокс.

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

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

«В спецификации написано…»

SelenIT приводит такой аргумент, что в спецификациях CSS2.1 и CSS3 Basic UI сказано: «The cursor is a pointer that indicates a link». Кроме того, он ссылается на сообщение Жерара Тальбо, в котором он отказывает в изменении одного из тестов к CSS 2.1. Однако, вряд ли подобное сообщение можно как-либо трактовать в пользу отсутствия курсора у кнопок. Контекст сообщения — тесты к спецификациям, и если в спецификации написано о том, что «курсор-поинтер указывает на ссылку», то это должно и в тестах значить только это.

Обновление 2018-10-16: После долгой битвы в ишьюс CSSWG, у нас получилось протолкнуть более корректную формулировку для этого дела!

В спецификации не сказано, что этот курсор не может использоваться для чего-либо ещё. Указано, скорее, его применение по умолчанию. На месте разработчиков спецификаций я бы изменил этот момент на «The cursor is a pointer that indicates an element that can be clicked» (по аналогии с тем, что предлагалось в тесте) или аналогичное, более общее, высказывание.

Это место в спецификации так и тянется как минимум с 1997 года, но веб с того времени сильно изменился и уже нельзя говорить о том, что «курсор-указатель указывает на ссылку», фактически его уже очень часто используют и для многих других элементов.

«Мерцание»

Мне тут подсказали ещё один аргумент: если на странице много активных элементов, то при перемещении курсор будет постоянно «мерцать», меняя состояние с обычного на поинтер.

Но такой аргумент — не проблема курсора на активных элементах. «Мерцание» курсора будет всего лишь симптомом, а проблемы могут быть следующими:

Активные элементы могут быть расположены не вплотную друг к другу. В этом случае, во-первых, пользователям будет сложнее попасть по нужному элементу, во-вторых, «мерцание», скорее всего, будет проявляться не только в смене курсора, но и в смене фона, текста, или чего-то ещё. По-хорошему, все однородные активные области элементов должны находиться как можно ближе друг к другу.
Другая, более редкая, проблема — захламлённость интерфейса. Если у вас вся страница утыкана всевозможными активными элементами, то это значит, что пора задуматься все ли они тут нужны прямо сейчас, и не стоит ли что-то упростить или упорядочить.

Итого

Если рассматривать идеальную ситуацию, то каждый элемент должен как-то меняться по ховеру, подсказывая, что с ним можно взаимодействовать. Но даже в этом случае нужно менять по ховеру и курсор — иначе иногда могут возникнуть неоднозначности в интерфейсе. Смены курсора, при этом, часто будет достаточно для того, чтобы хоть немного, но улучшить интерфейс — если дизайнер нарисовал какой-то контрол, который выглядит не особо кликабельным, то добавление смены курсора немного этот момент исправит (но лучше после этого всё равно написать об этой проблеме дизайнерам, чтобы они нарисовал более понятное состояние).

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

Да, конечно, если у кого-то есть чем дополнить или опровергнуть часть высказанных мной утверждений — конкретные цифры, замеры и аргументы приветствуются. Все места, где я пишу о том, что «кому-то это облегчит жизнь» — чисто умозрительные и не подтвеждённые цифрами. Но всё говорит за то, что так оно и есть — так что спорить с этим можно только после A/B-тестирования и сравнения его результатов.

Ссылки

Заметка Криса Койера о том, как добавить ссылки кликабельным элементам.
В комментариях приводятся всё те же доводы про привычки и операционные системы, плюс консервативные, не подкреплённые аргументами взгляды на то, что только ссылки должны иметь курсор-поинтер.
Заметка Дмитрия Фадеева про соответствие курсора
В этой заметке Дмитрий приходит к заключению «Если тип курсора неверный, то нужно задавать его, используя CSS-свойства cursor», приводя в пример кастомные кнопки и плейсхолдеры для инпутов.
Слайды доклада Вадима Макеева «Жми сюда!»
Доклад больше о том, что функциональность элемента должна отражаться в используемых html-тегах, но в одном месте Вадим пишет про кнопку: «Делать лапу cursor:pointer совсем не нужно» и не приводит никаких аргументов в пользу этого утверждения. Надеюсь, прочитав эту статью, Вадим или изменит свой взгляд по этому вопросу, или напишет аргументы в пользу своего высказывания.

Опубликовано

22 января 2013 г. с метками: #Practical #Design #Accessibility

CSS: переключатель при наведении курсора

Пример

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

а: парение
{
цвет фона: желтый;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Селектор : hover используется для выбора элементов при наведении на них указателя мыши.

Совет: Селектор: hover можно использовать для всех элементов, а не только
по ссылкам.

Совет: Используйте селектор: link для стилизации ссылок на
непосещенные страницы, селектор: посещенный для стиля
ссылки на посещенные страницы, и
: активный селектор для стилизации активной ссылки.

Примечание: : hover ДОЛЖЕН стоять после: link и: loaded (если они присутствуют) в определении CSS, чтобы быть эффективным!

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую селектор.

Селектор
: парение	4,0	7,0	2,0	3,1	9,6

Примечание: В IE должен быть объявлен
чтобы селектор: hover работал с другими элементами, кроме элемента .

Синтаксис CSS

: hover {
css декларации ;
}
Демо

Другие примеры

Пример

Выбор и стиль элемента

и

при наведении на него указателя мыши:

p: hover, h2: hover, a: hover {
background-color: yellow;
}

Попробуй сам »

div {
дисплей: нет;
}

span: hover + div {
display: block;
}

Попробуй сам »

Пример

Показать и скрыть раскрывающееся меню при наведении курсора мыши:

ul {
дисплей: встроенный;
маржа: 0;
отступ: 0;
}
ul li {display: inline-block;}
ul li: hover {background: # 555;}
ul li: hover ul {display: block;}
ul li ul {
позиция: абсолютная;
ширина: 200 пикселей;
дисплей: нет;
}
ul li ul li {
справочная информация: # 555;
дисплей: блок;
}
ul li ul li a {display: block! Important;}
ul li ul li: hover {background: # 666;}

Попробуй сам »

Связанные страницы

Учебник

CSS: ссылки CSS

Учебное пособие по CSS: Псевдоклассы CSS

Изменить цвет кнопки наведения

Спасибо за использование треков!

Этот CSS заставит ссылки меню менять цвет при наведении на них:

 .первичное меню ul a: hover,
.menu-primary ul a: активный,
.menu-primary ul a: focus {
  цвет синий;
}

И если вы хотите, чтобы они оставались определенного цвета после посещения, вы также можете добавить этот CSS:

  .menu-primary ul a: visit {
  цвет синий;
}

Большое спасибо, у меня есть еще 2 небольших вопроса.

— У меня небольшая проблема, когда я меняю цвет фона своего веб-сайта с помощью следующего кода

  кузов,
.выдержка
.основной,
.menu-primary ul,
#Заголовок сайта {
фон: # 000;
}

Также меняет фон постов на главной странице сайта в мобильной версии. Вы знаете, как я могу это исправить?

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

А можно сделать?

Большое спасибо 🙂

Вот обновленная версия этого кода, которая не повлияет на фон сообщений на главной странице:

  кузов,
.основной,
.menu-primary ul,
#Заголовок сайта {
  фон: # 000;
}

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

  .featured-image: после {
содержание: '';
позиция: абсолютная;
верх: 0;
справа: 0;
внизу: 0;
слева: 0;
фон: фиолетовый;
непрозрачность: 0,5;
переход: непрозрачность 0,2 с;
}
.featured-image: hover: after {
непрозрачность: 0;
}

Вы можете заменить «фиолетовый» на другой оттенок с помощью шестнадцатеричного кода. Непрозрачность установлена на 50% (0.5), и вы можете использовать диапазон от 0,1 до 1, чтобы изменить это значение. Наконец, я добавил переход, который длится 0,2 секунды, чтобы он выглядел более плавным, и вы можете изменить значение 0,2 секунды, чтобы сделать анимацию медленнее или длиннее, если хотите.

Этот ответ был изменен 1 год, 11 месяцев назад пользователем Ben Sibley.

Стиль наведения, фокуса и активного состояния по-разному

16 октября 2019

Я стилизовал : hover , : focus и : active годами одинаково.Не могу вспомнить, когда я начала так укладывать. Вот код, который я всегда использую:

  // Не лучший подход. Я объясню почему в этой статье
.selector {
  &: навести,
  &: фокус,
  &: active {
    // Стили здесь
  }
}

По мере того как я уделял больше внимания доступности клавиатуры (и, следовательно, уделял больше внимания фокусировке), я начал думать, что мы не должны одинаково оформлять наведение, фокус и активные состояния.

Наведение, фокус и активное состояние должны иметь разные стили.

Причина проста: это разные государства!

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

Начнем с : наведите курсор на .

Стилизация состояний при наведении

: hover срабатывает, когда пользователь наводит курсор мыши на элемент.

Состояния наведения обычно представлены изменением цвета фона (и / или цвета ) . Разница в состояниях не должна быть очевидной, потому что пользователи уже знают, что они на что-то ориентируются.

  кнопка {
  цвет фона: #dedede;
}

button: hover {
  цвет фона: #aaa;
}

Состояния фокуса стилей

: фокус активируется, когда элемент получает фокус. Элементы могут получать фокус двумя способами:

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

Фокусируемые элементы:

Ссылки ( )
Кнопки (
Элементы формы ( input , textarea и т. Д.)
Элементы с tabindex

Вот несколько важных моментов, на которые следует обратить внимание:

Пользователи не могут перейти к элементу с tabindex = "- 1" , но могут щелкнуть по нему. Щелчок вызывает фокус.
В Safari и Firefox (Mac) щелчки не фокусируются на элементе
При нажатии на ссылку ( ) фокус остается на ссылке, пока вы не уберете палец с мыши.Когда вы поднимаете палец, фокус перенаправляется в другое место, если href указывает на действительный id на той же странице.

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

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

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

Добавление контура
Создание анимации с движением
Изменение цвета фона
Изменение цвета

Поскольку цвет фона и цвет изменения цвета часто сопровождают : hover , имеет смысл, что контуры или анимации должны сопровождать : focus .

Вы можете использовать комбинацию свойств контур , граница и box-shadow для создания удобных стилей фокуса.Я рассказываю, как это сделать, в разделе «Создание собственного стиля фокуса».

  кнопка {
  цвет фона: #dedede;
}

button: hover {
  цвет фона: #aaa;
}

button: focus {
  наброски: нет;
  box-shadow: 0 0 0 3px lightskyblue;
}

Стилизация активных состояний

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

Этот отзыв полезен и для веб-сайтов.Вы можете стилизовать момент «нажатия кнопки» с помощью : active . : активный триггер срабатывает при взаимодействии с элементом . Здесь взаимодействие означает:

Удерживая левую кнопку мыши на элементе (даже на несфокусированном)
Удерживание клавиши пробела (на кнопках)

  кнопка: активна {
  цвет фона: # 333;
  цвет границы: # 333;
  цвет: #eee;
}

Две странные вещи, на которые следует обратить внимание:

Удерживая нажатой клавишу пробела, активирует : активен на кнопках, но удерживание клавиши Enter — нет.
Ввести триггерные ссылки, но не создать активное состояние. Пробел вообще не запускает ссылки.

Стили по умолчанию для ссылок

Ссылки имеют активный стиль по умолчанию. Они становятся красными при нажатии.

Взаимосвязь между активностью и фокусом

Когда вы удерживаете левую кнопку мыши на фокусируемом элементе, вы запускаете активное состояние . Вы также запускаете состояние фокуса одновременно.

Когда вы отпускаете левую кнопку мыши, фокус остается на элементе

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

Для ссылок:

Когда вы удерживаете левую кнопку мыши: триггеры : активны и : фокус состояние в Firefox и Chrome Активны только триггеры в Safari (проверено только на Mac)
Когда вы отпускаете левую кнопку мыши: : фокус остается на ссылке (если href ссылки не совпадает с id на той же странице).В Safari фокус возвращается к .

Для кнопок:

Когда вы удерживаете левую кнопку мыши: триггеры : активны и : фокус состояния только в Chrome. Не запускает : фокус вообще в Safari и Firefox (Mac). Я писал об этом странном поведении здесь.

Если вы хотите, чтобы клики фокусировались на кнопках, вам нужно добавить этот JavaScript как можно раньше. (Что касается того, почему, вы можете прочитать статью, на которую я ссылался выше, для получения дополнительной информации).

  document.addEventListener ('click', event => {
  if (event.target.matches ('button')) {
    event.target.focus ()
  }
})

После получения этого кода поведение кнопок при нажатии становится:

Когда вы удерживаете левую кнопку мыши: запускает : активен во всех браузерах. Триггеры : фокус только на Chrome.
Когда вы отпускаете левую кнопку мыши: Триггеры : фокус на Safari и Firefox (Mac). : фокус остается на кнопке для других браузеров.

Поведение кнопки в Safari после добавления фрагмента кода JavaScript выше.

Теперь вы знаете о состояниях наведения, фокуса и активных состояний, я хочу поговорить о стилизации всех трех.

Волшебное сочетание

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

 . Элемент: hover,
.element: active {
  / * Изменить цвет фона / текста * /
}

.element: focus {
  / * Показать схему / *
}

Для пользователей мыши:

Когда пользователь наводит курсор на элемент, цвет фона (и / или цвет ) изменяется.Они получают обратную связь.
Когда пользователь щелкает элемент, отображается контур фокуса. Они получают обратную связь.

Для пользователей клавиатуры:

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

Лучшее из обоих миров!

Я не тестировал полностью магическую комбинацию. Это проверка правильности концепции. Буду признателен, если вы поможете мне с тестами и дадите мне знать, как дела.
Если вы запускаете тесты, не используйте Codepen. Состояния фокуса для ссылок на Codepen странные. Если вы наводите курсор на ссылку, контур фокуса удаляется. Почему? Я не знаю. Иногда я думаю, что лучше всего протестировать подобные вещи без каких-либо необычных инструментов. Просто старый HTML, CSS, JS.

Немагическая (но может быть лучше) комбинация

Как я уже упоминал выше, нажатие на кнопки ведет себя странно в Safari и Firefox (Mac).Если вы добавили фрагмент кода JavaScript, который я вам показал, волшебная комбинация все еще работает. Но это не идеально.

Для Safari и Firefox (Mac) происходит следующее:

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

Если вы думаете, что этого достаточно, то волшебная комбинация работает. Вы можете остановиться здесь.

Но если вы думаете, что возможностей недостаточно, вам нужно стилизовать : hover , : focus и : active отдельно.

  .element: hover {
  / * Изменить цвет фона / текста * /
}

.element: active {
  / * Еще одно изменение цвета фона / текста * /
}

.element: focus {
  / * Показать схему / *
}

Поведение кнопки в Safari, если вы стилизовали все три состояния.

Вот и все! Надеюсь, вы узнали что-то сегодня!

Если вам понравилась эта статья, расскажите о ней другу! Поделитесь этим в Твиттере. Если вы заметили опечатку, я буду признателен, если вы сможете исправить ее на GitHub. Спасибо!

: hover — CSS: каскадные таблицы стилей

Псевдокласс : hover CSS соответствует, когда пользователь взаимодействует с элементом с помощью указывающего устройства, но не обязательно активирует его.Обычно он запускается, когда пользователь наводит курсор на элемент (указатель мыши).

 
a: hover {
  оранжевый цвет;
}

Стили, определенные псевдоклассом : активный , будут переопределены любым последующим псевдоклассом, связанным со ссылками (: ссылка , : посещенный или : активный ), который имеет по крайней мере такую же специфичность. Чтобы правильно оформить ссылки, поместите правило : hover после правил : ссылка и : посещено , но перед правилом : active , как определено в LVHA-order : : link — : посещено — : наведите курсор на — : активно .

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

Базовый пример

HTML

   Попробуйте навести указатель мыши на эту ссылку.

CSS

  a {
  цвет фона: синий;
  переход: цвет фона .5s;
}

a: hover {
  цвет фона: золото;
}

Результат

Галерея изображений

Псевдокласс : hover можно использовать для создания галереи изображений с полноразмерными изображениями, которые отображаются только при наведении указателя мыши на эскиз. См. Эту демонстрацию для возможной подсказки.

Примечание: Для аналогичного эффекта, но на основе псевдокласса : checked (применяется к скрытым радиобоксам), см. Эту демонстрацию, взятую со справочной страницы: checked.

Таблицы BCD загружаются только в браузере

как изменить цвет на белый при наведении курсора на кнопку

Изменить цвет кнопки при наведении html

CSS Buttons, Изменение цвета кнопки при наведении · html css. Добрый день! Я понимаю, что этот вопрос задавали несколько раз. Я просмотрел здесь несколько тем, но 1. Введите «style =» в теге кнопки HTML, чтобы изменить стиль кнопки с помощью простого HTML. 2. Введите «background-color:», за которым следует название цвета или шестнадцатеричный код в разделе стиля вашего тега кнопки HTML или CSS, за которым следует точка с запятой.3.

Изменение цвета кнопки при наведении курсора, Может ли кто-нибудь помочь мне изменить цвет фона моей кнопки. input [type = «submit»]: hover {цвет фона: синий; }. Cirediallo Ваш стиль наведения выглядит следующим образом: a.buttonStyle: hover {background: # 383; } Таким образом, он установлен специально для тега . Измените свой стиль на be.buttonStyle: hover {background: # 383; } Таким образом, вы устанавливаете наведение только на конкретный класс. Тогда это работает. См. Этот jsFiddle для демонстрации.

Изменение цвета ввода (кнопки) в режиме наведения, Изменение цвета кнопки при наведении.Один из способов сделать кнопки вашего шаблона не только уникальными и фирменными, но и пригласить вас. Используйте селектор: hover, чтобы изменить стиль кнопки, когда вы наводите на нее указатель мыши. Совет: используйте свойство transition-duration, чтобы определить скорость эффекта «зависания»: Пример

Изменить цвет кнопки при загрузке при наведении

Изменить цвет при наведении на кнопку с настройкой Bootstrap, Цвет для ваших кнопок берется из классов btn-x (например, btn-primary, btn- success), поэтому, если вы хотите чтобы вручную изменить цвета, написав Изменить цвет наведения на кнопке с настройкой Bootstrap.Задать вопрос задан 5 лет 10 месяцев назад. Активна 9 месяцев назад. Просмотрели 119 тыс. Раз 34. 11. Я пытаюсь использовать

Основная кнопка: цвет фона при наведении?!, Всем привет! На панели навигации я создал основную кнопку. Фон этой кнопки имеет (как и следовало ожидать) основной цвет, который я установил в переменных начальной загрузки. Scss Цвет кнопки изменения начальной загрузки: иногда нам нужно настроить цвет кнопки цветов начальной загрузки, а иногда нам нужно изменить некоторые другие стили. Все это можно сделать очень легко, если подойти к делу должным образом.Для этого переопределите классы начальной загрузки css.

Buttons · Bootstrap, 5 простых способов изменить стили кнопок Bootstrap Затем вам нужно увеличить толщину границы и изменить цвет, чтобы он соответствовал границе. Наконец, вы можете добавить некоторые эффекты наведения, изменив цвет и как изменить цвет кнопки в HTML. Из этой статьи вы узнаете, как изменить цвет кнопки в HTML. Вы можете изменить цвет кнопки, используя обычный HTML или CSS (каскадные таблицы стилей) в HTML5.

Css button hover effects

Как анимировать кнопки с помощью CSS, Добавьте эффект «нажатия» при щелчке: Click. Попробуйте сами »Добавить стрелку при наведении: наведение Перейдите к нашему руководству по кнопкам CSS, чтобы узнать больше о стилях кнопок. Определение и использование. Селектор: hover используется для выбора элементов при наведении на них указателя мыши. Совет: Селектор: hover можно использовать для всех элементов, а не только для ссылок. Совет: используйте селектор: link для стилизации ссылок на непосещенные страницы, селектор: visit для стилизации ссылок на посещенные страницы и селектор: active для стилизации активной ссылки.

Hover.css, Коллекция CSS3-эффектов наведения, которые применяются к ссылкам, кнопкам, логотипам, SVG, избранным изображениям и т. Д. Легко применять к вашим собственным элементам, изменять или Все эффекты Hover.css используют один элемент (с помощью некоторых псевдоэлементов, где это необходимо), являются самодостаточными, поэтому вы можете легко копировать и вставлять их и использовать CSS Дерзость и МЕНЬШЕ вкусов. Многие эффекты используют функции CSS3, такие как переходы, преобразования и анимация. Старые браузеры, которые не поддерживают эти функции, могут потребовать

25 CSS-эффектов наведения кнопок, Коллекция отобранных вручную бесплатных примеров кода HTML и CSS для эффектов наведения курсора.Обновление сентябрьской коллекции 2018 г. 3 новинки. Сегодня вы научитесь создавать множество эффектов наведения на кнопку. Эти эффекты будут очень полезны в будущем, когда вы будете создавать кнопки навигации, другие кнопки на форме и т. Д. Затем вы сможете выбрать идеальный эффект наведения в соответствии с вашими потребностями. Эти эффекты основаны на анимации CSS, переходах и основных командах. Итак, сегодня я

Цвет наведения кнопки Squarespace

Как создать эффекты наведения кнопки в Squarespace // Squarespace, код готов, посмотрите краткое руководство и возьмите те коды CSS, которые скопируйте и вставьте ниже! В Squarespace вы можете изменить режим наведения кнопки по умолчанию с помощью специального кода.В этом посте вы узнаете, как это сделать. Один из способов сделать кнопки вашего шаблона не только уникальными и фирменными, но и пригласить вашу аудиторию щелкнуть мышью — это добавить привлекательный режим наведения курсора.

Как мне изменить цвет блока кнопок при наведении ?, Я добавил черный блок кнопок с белым текстом на одной из своих страниц, но я хочу, чтобы это было. Sqs-block-button .sqs-block-button -element — small: hover {background-color: все знания и обучение, необходимые для достижения успеха с новым цветом кнопки Squarespace — Измените цвет фона кнопки.Цвет текста кнопки — изменение цвета текста. Шрифт кнопки — изменение шрифта. Размер текста не может быть изменен для кнопок блока формы и блока новостной рассылки. Совет: Для стиля Outline текст автоматически отображается как черный или белый при наведении курсора, в зависимости от цвета кнопки.

Как добавить эффект наведения к кнопкам Squarespace, Альтернативный цвет текста. Шрифт. Но что, если вам нужна более динамичная и интерактивная кнопка, чем предлагает Squarespace? Если вы хотите построить высокий цвет кнопки.Цвет текста. Альтернативный цвет кнопки (для отображения над разделами баннера) Альтернативный цвет текста. Шрифт. Но что, если вам нужна более динамичная и интерактивная кнопка, чем предлагает Squarespace? Если вы хотите создать веб-сайт с высокой конверсией, важно, чтобы призывы к действию появлялись. Добавление эффекта наведения к кнопкам — отличный способ

Тест наведения кнопок

Кнопки с возможностью наведения, text-align: center; текстовое оформление: нет; display: используйте селектор: hover, чтобы изменить стиль кнопки, когда вы наводите на нее указатель мыши.Совет: используйте определение и использование. Селектор: hover используется для выбора элементов при наведении на них указателя мыши. Совет: Селектор: hover можно использовать для всех элементов, а не только для ссылок. Совет: используйте селектор: link для стилизации ссылок на непосещенные страницы, селектор: visit для стилизации ссылок на посещенные страницы и селектор: active для стилизации активной ссылки.

Отображать текст при наведении курсора мыши, Используйте заголовок для отображения сообщения: .Кнопка тени Тень при наведении. Используйте свойство box-shadow, чтобы добавить тени к кнопке: Example.button1 {box-shadow: 0 8px 16px 0 rgba (0,0,0,0.2), 0 6px 20px 0 rgba (0

Button Hover Test, xxxxxxxxxx. 7. 1.

. 2.

dugme . 3.

. 4.

ovde ide

. 5.

раскрывающийся список . Привет всем! Это мой код: test xxx Когда я запускаю его, я получаю снимок экрана № 1. Как показано на прикрепленном изображении. При наведении курсора на кнопку «Отправить» я получаю темы подкаста статей

Как для изменения цвета кнопки squarespace

Кнопки стилей — Справка Squarespace, Стандартным стилем для всех кнопок является кнопка с белым текстом / черным фоном О, и цвет изменит цвет текста на кнопке.background-color будет Button Color — Изменить цвет фона кнопки. Цвет текста кнопки — изменение цвета текста. Шрифт кнопки — изменение шрифта. Размер текста не может быть изменен для кнопок блока формы и блока новостной рассылки. Совет: Для стиля Outline текст автоматически отображается как черный или белый при наведении курсора, в зависимости от цвета кнопки.

Изменение цветов — Справка Squarespace, Вы можете изменить цвета отдельной кнопки, изменив цветовую тему для раздела, в котором она находится.Блоки кнопок и блоки со встроенными кнопками вроде Спасибо! Это определенно сработало. Мне также нужно было изменить цвет кнопки при наведении, но я разобрался. Для тех, кто может увидеть это позже, вот код, который я использовал для изменения цвета наведения: .form-wrapper input [type = submit]: hover {background: # ffffb3; } Спасибо, опо!

Как изменить стиль только для одной кнопки ?, Как изменить цвет кнопки в квадратном пространстве? В поле «Текст» введите текст для метки кнопки.Мы рекомендуем, чтобы текст кнопки не превышал 25 символов. В поле URL перехода по клику добавьте веб-адрес или щелкните, чтобы добавить различные типы ссылок. Настройте размер и выравнивание кнопки. Нажмите Применить, чтобы сохранить изменения. Стиль кнопки. Используйте редактор блока кнопок, чтобы изменить размер кнопки и

Изменить цвет кнопки при наведении javascript

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

Css кнопка при наведении меняет цвет: html — Цвет кнопки при наведении, отличный от класса в css

Псевдокласс :hover | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Браузеры

Оформляйте стили наведения, фокуса и активного состояния по-разному / Хабр

Стилизация наведения (:hover)

Стилизация фокуса (:focus)

Стилизация активного состояния (:active)

Стили ссылок по умолчанию

Взаимосвязь между :active и :focus

Волшебная комбинация

Не волшебная (но может даже лучше) комбинация

20 удивительных анимированных кнопок на чистом CSS

Вступление

1. Stylish Animated CSS Buttons for Bloggers

2. Animated CSS Buttons

3. More Animated CSS Buttons

4. CSS3 Buttons

5. Simple CSS Buttons Animation

6. CSS + SVG Button Animation

7. Animation with Cubic Bezier

8. Pure CSS Button

9. Blobs Button

10. Simple CSS Button Hover Effects

11. CSS Button with Hover Effect

12. 100 Days CSS Button N 045

13. Pure CSS Buttons

14. Auto Width CSS Button Flip

15. Collection of Button Hover Effects

16. Pure CSS Button with Ring Indicator

17. CSS3 Button Hover Effects with FontAwesome

18. CSS3 3D Flip Button

19. Button Fun

20. Button Shine Effect

Меняем цвет элемента по наведению мышки. Простой пример, простой CSS

Практика

Послесловие

Замена кнопки submit в форме html

Ховер на карточках и плитках // Анимация в вебе

Правильный курсор на активных элементах

Преимущества использования

Обратная связь

Определение границ активной области

Аргументы против смены курсора

«В ОС используется обычный курсор»

«Я вижу курсор — считаю это ссылкой»

«Ссылку можно открыть в новом окне и вызвать для неё контекстное меню»

Вернёмся к иллюстрации из г+:

«В спецификации написано…»

«Мерцание»

Итого

Ссылки

CSS: переключатель при наведении курсора

Пример

Определение и использование

Поддержка браузера

Пример

Связанные страницы

Изменить цвет кнопки наведения

Стиль наведения, фокуса и активного состояния по-разному

Стилизация состояний при наведении

Состояния фокуса стилей

CSS

Результат

Галерея изображений

как изменить цвет на белый при наведении курсора на кнопку

Изменить цвет кнопки при наведении html

Как для изменения цвета кнопки squarespace

Изменить цвет кнопки при наведении javascript

Изменить цвет кнопки при наведении курсора inline css

HTML

Новости

События

Галерея

CSS