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

Как изменить цвет кнопки при наведении css

  • автор:

Hover — эффекты при наведении

Мы задали цвет фона и текста, радиусы закругления, размер шрифта, отступы. Для анимации используем transition: all 500ms ease, которое означает, что в нужный момент будут анимированы все свойства в течение 500 миллисекунд.

Горизонтальная заполнение

Полупрозрачный фоновый цвет постепенно заполняет кнопку при наведении. Обычно заполнение происходит с какой-то одной стороны и переход длится до тех пор, пока вся кнопка не будет заполнена.

Чтобы достичь такого результата, нужно использовать псевдо-элемент :before:

 button:before

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

 button:hover:before

Вертикальное заполнение

Если анимировать высоту, то заполнение произойдёт сверху.

 button:before < content:''; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: rgba(255,255,255,0.3); border-radius: 5px; transition: all 2s ease; >button:hover:before

Инвертирование цвета

Инвертируем цвет внутри кнопки и добавляем границу:

 button:hover

Пунктирная граница

Добавим границу у кнопки и инвертируем цвета:

 button < border: 3px solid #3a7999; >button:hover

Появление значка

При наведении значок плавно появиться слева от текста.

Подключим шрифт со значками Font Awesome.

Увеличим внутренний отступ, чтобы для значка было место, и добавим свойство overflow со значением hidden:

 button

Далее добавляем значок из шрифта Font Awesome в псевдо-элемент before и размещаем его за пределами кнопки:

 button:before

Осталось установить свойство left:

 button:hover:before

Купи что-нибудь

Эффект подпрыгивания

Для данной анимации установим несколько ключевых кадров (keyframes):

 @keyframes bounce < 0%, 20%, 60%, 100% < transform: translateY(0); transform: translateY(0); >40% < transform: translateY(-20px); transform: translateY(-20px); >80% < transform: translateY(-10px); transform: translateY(-10px); >> 

Подключаем созданную анимацию:

 button:hover

Искажение

В CSS3 появилась возможность использовать искажения:

 button:hover

3D-поворот

Самый сложный эффект. Используем поворот кнопки для отображения другого сообщения, которое мы добавим в псевдо-элемент after у нашей кнопки.

Зададим для свойства transform-style значение preserve-3d, чтобы все дочерние элементы кнопки находились в 3D-пространстве:

 button

Установим правила для псевдо-элемента after:

 button:after

Правила добавлены сверху, перед кнопкой, и выставлены такие же параметры width и border-radius, как и у самой кнопки. Что касается свойств трансформации, то в качестве опорной точки, относительно которой будет происходить трансформация, установлен нижний левый угол элемента и указано вращение по оси X со значением 90 градусов, чтобы элемент казался плоским. Сейчас осталось только создать анимацию при наведении:

 button:hover

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

Кнопка, изменяющая свой цвет
при наведении на нее курсора

Примеры переливающихся и меняющих свой цвет текстов мы уже рассматривали ранее. Теперь на очереди стоят кнопки (input type=»button»). Рассмотрим JavaScript код, позволяющий изменять цвет кнопки при наведении на нее курсора мышки.

Собственно вот так выглядит пример работы рассматриваемого скрипта:

Для получения таких кнопок, изменяющих свой цвет текста при наведении курсора мышки, поместите следующий скрипт в начало Вашей странички:

JavaScript код:

< script type = "text/javascript" >
function color_button ( x ) if ( «INPUT» == event . srcElement . tagName ) event . srcElement . className = x ;
>

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

< form name = "primer" align = "center" onmouseover = "color_button('start')"
onmouseout = «color_button(»)» >
Наведите курсор мыши на одну из кнопок !< br >
< input type = "button" value = "Кнопка № 1" >
< input type = "button" value = "Кнопка № 2" >
< input type = "button" value = "Кнопка № 3" >

Еще не забудьте вставить в заголовок странички (между тегами и ) стиль, который будет применен к нашим кнопкам при наведении на них курсора мышки:

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

Анимация кнопок при наведении

В прошлом уроке мы разобрали, как изменить стиль кнопки при наведении на неё курсора мыши. Для этой цели применяется псевдокласс :hover, а чтобы изменения происходили плавно, добавляется свойство transition, которое устанавливает время перехода.

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

button < background-color: blue; transition: 0.5s; >button:hover

Использование transition

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

Так, если понадобится задать разное время перехода для цвета фона и рамки, пишем следующее, разделяя параметры запятой:

transition: background-color 1s, border-color 0.5s;

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

Если требуется сделать задержку перед началом изменения, то добавляем в конец ещё время:

transition: background-color 1s 0.5s;

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

Рассмотрим добавление к кнопке рамки, сделанной через box-shadow. Да, это свойство добавляет тень, но вполне универсально, чтобы применяться, в том числе, и для формирования рамок у кнопок. Здесь используется две тени, одна поверх другой, что, в итоге, даёт зелёную рамку на некотором удалении от кнопки.

box-shadow: 0 0 0 2px #fff, /* Белая тень */ 0 0 0 4px #3f8a7c; /* Зелёная тень */

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

transition: background-color 0.4s, box-shadow 0.2s 0.3s;

Окончательный код показан в примере 1.

Пример 1. Использование transition

Использование animation

Свойство transition имеет своё определённую роль и с его помощью нельзя сделать сложную анимацию элемента. Для этой цели предназначено свойство animation, работающее совместно с правилом @keyframes.

Сперва нашей анимации следует дать уникальное имя, пусть будет flip :

@keyframes flip

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

  • 0% — исходное положение элемента;
  • 50% — элемент повёрнут на 180°.

Конечное значение 100% в данном случае можно не указывать, поскольку оно совпадает с начальным.

@keyframes flip < 0% <>50% <> >

Для вращения элемента используем свойство transform с функцией rotateX().

@keyframes flip < 0% < transform: rotateX(0); >50% < transform: rotateX(180deg); >>

Теперь эту анимацию можно привязать к кнопке, добавив свойство animation к псевдоклассу :hover .

button:hover < animation: flip 1s; /* Название и время анимации */ >

Саму анимацию можно воспроизвести несколько раз, добавив число повторений в конец набора значений:

animation: flip 1s 3; /* Повторяем три раза */

Или сделать анимацию бесконечной с помощью ключевого слова infinite .

animation: flip 1s infinite; /* Бесконечная анимация */

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

Пример 2. Использование @keyframes

Использование сторонних библиотек

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

Ниже рассмотрим пару популярных библиотек.

Animate.css

Эту библиотеку можно установить через npm, Yarn или добавить напрямую через CDN:

После чего на сайте выбираем понравившуюся анимацию и вставляем её имя в свойство animation . Обязательно следует добавить и продолжительность самой анимации:

animation: shakeX 1s;

В примере 3 при наведении курсора на заблокированную кнопку она трясётся по горизонтали. Для анимации не всех кнопок, а только с атрибутом disabled , используем комбинацию псевдоклассов :disabled:hover .

Пример 3. Использование библиотеки Animate.css

Hover.css

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

Эффекты для элемента работают путём добавления соответствующего класса к элементу. Все классы Hover.css начинаются с префикса hvr-, после чего идёт имя эффекта. К примеру, для создания пульсирующей кнопки при наведении, указываем класс hvr-pulse :

В примере 4 при наведении курсора мыши на кнопку она поднимается вверх и под кнопкой добавляется тень.

Пример 4. Использование библиотеки Hover.css

Итого

  • Для плавного изменения значений стилевых свойств при наведении на кнопку курсора мыши используется свойство transition.
  • Сложная анимация делается с помощью ключевых кадров через правило @keyframes.
  • Сама анимация применяется к кнопке через псевдокласс :hover и свойство animation.
  • Готовые стилевые библиотеки для анимации позволяют упростить создание эффектов для кнопок.

Автор: Влад Мержевич
Последнее изменение: 13.06.2023

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

Создайте кнопку, чтобы при наведении на неё курсора мыши вокруг кнопки плавно появлялся контур (рис. 1).

Создайте кнопку, чтобы при наведении на неё курсора мыши внутри кнопки плавно появлялась рамка (рис. 1).

См. также

  • :focus на мобильных устройствах
  • animation
  • box-shadow
  • transition
  • Анимации в действии
  • Анимация
  • Анимация в CSS
  • Анимация ссылок при наведении
  • Всплывающая подсказка
  • Добавление тени
  • Добавление треугольника
  • Множественные переходы
  • Оформление кнопок
  • Переходы
  • Переходы в действии
  • Переходы и анимация
  • Переходы с помощью :hover
  • Работа с типографикой
  • Сочетание с псевдоклассами
  • Тени у
  • Трансформация в CSS

Рецепты

  • Как добавить тень к кнопке?
  • Как изменить вид нажатой кнопки?
  • Как плавно изменить цвет ссылки?
  • Как сделать мигающий текст?

Как изменить цвет кнопки: полная инструкция для новичков

Как изменить цвет кнопки: полная инструкция для новичков

Меняем через псевдоэлемент :before (обратите внимание на span, который нужно разместить внутри кнопки) :

Кнопка внутри формы (input type=»submit»):

Тот же самый принцип, что и выше, но вместо button[type=»submit»] нужно в css прописать input[type=»submit»]

Кнопка, как отдельный элемент в html кода:

Просто меняем фон и цвет:

А теперь меняем цвет, с помощью псевдоэлемента :before

Кнопка в Bootstrap

Чтобы изменить цвет кнопки в Bootstrap, вам необходимо найти нужный класс (или id), а также нужный порядок вложенности элементов.

К примеру, у вас есть кнопка

 

И вы хотите изменить для нее цвет при наведении. Тогда я бы рекомендовал в css прописать следующее:

.btn.btn-outline-primary:hover < background: red; /* Либо любой другой цвет */ /* А также заменил бы цвет и для border */ >

Как изменить цвет кнопки с помощью Js

Я покажу два варианта, как поменять цвет кнопки при наведении используя JavaScript.

Первый вариант — мы будем добавлять класс с нашей кнопки через js:

Второй вариант — мы будем менять css стили прямо в js:

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

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

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