Поменять цвет кнопки при наведении html

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

Меняем через псевдоэлемент :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:

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

Источник

Меняем цвет элемента по наведению мышки

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

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

Обновлено 17.01.2019

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

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

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

 
Все о WooCommerce Все плагины WordPress Всякие полезности Украшаем сайт Хаки WordPress 
 

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

Практика

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

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

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

Послесловие

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

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

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

Источник

Три эффекта наведения на кнопку

На этом уроке мы разберем три разных эффекта при наведении на кнопку.

Посмотрите демо на CodePen

HTML разметка

Создадим в разметке три разных блока и и обернем в контейнер с классом wrapper для выравнивания их по центру. Один блок — одна кнопка.

Замена цвета кнопки при наведении (эффект 1)

.buttonLeft border-radius: 5px; // скругление
padding: 0 40px; //поля внутри кнопки
overflow: hidden; // скрыть все что выходит за родителя
background: #BA7BA1; // цвет кнопки
position: relative; // установим позицию родителя
line-height: 40px;
color: #fff; // цвет текста
margin-right: 40px; // промежуток между кнопками
>

В качестве заполнения кнопки другим цветом, будет служить псевдоэлемент before. Однако увидеть, как происходит плавная замена одного цвета на другой, можно будет только при наведении на кнопку. Весь фокус состоит в трансформации псевдоэлемента before: из невидимой (-100%) позиции в состоянии покоя в видимую (0) при наведении.

.buttonLeft::before content: »;
position: absolute; // позиционировать относительно родителя
left: 0; // координата псевдоэлемента
bottom: 0;
width: 100%;
height: 100%;
transform: translateX(-100%); // прячем псевдоэлемент за родителем
background: #EC008C; // новый цвет
transition: transform .2s ease-in-out; // плавная анимация
>

.buttonLeft:hover::before transform: translateX(0); // показываем псевдоэлемент
>

.buttonLeft span position: relative;
z-index: 1; // текст сверху
>

Изменение положения кнопки при наведении (эффект 2)

При наведении мыши на центральную кнопку, нужно выпавшую кнопку вернуть обратно в рамку.

// задаем позиционирование
.buttonOverlay padding: 10px 25px;
position: relative;
color: #fff;
margin-right: 40px;
>

// рисуем выпавшую кнопку
.buttonOverlay::before content: »;
position: absolute;
border-radius: 5px;
height: 100%;
width: 100%;
top: 5px;
right: 5px;
background-color: #BA7BA1;
z-index: -1;
transition: transform .2s ease-in-out;
>

// рисуем пустую рамку
.buttonOverlay::after content: »;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #EC008C;
>

// при наведении возвращаем кнопку в свою рамку
.buttonOverlay:hover::before transform: translate(6px, -4px);
>

Нажатая вниз кнопка при наведении (эффект 3)

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

.pressDown background-color: #BA7BA1;
padding: 10px 30px;
color: #fff;
border-radius: 5px;
border-bottom: 4px solid #EC008C;
transition: 0.1s;
>

.pressDown:hover border-bottom-width: 0; // обнуление толщины рамки
margin-top: 3px;
>

Создано 11.05.2020 10:03:11

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Анимации CSS

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

1. Как оживить кнопку

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

1.1. Запустите стартовый шаблон

Для начала возьмите наш стартовый шаблон с кнопкой красного цвета, сохраните к себе в файл и откройте в браузере:

DOCTYPE html> html> head> meta charset="utf-8"> style type="text/css"> .animated-btn < background-color: red; >style> head> body> button class="animated-btn">Кнопкаbutton> body> html> 

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

1.2. Добавьте класс с новым стилем

Для начала попробуйте поменять цвет кнопки в принципе, без наведения. Сложность здесь в том, что старое CSS-правило надо сохранить: красный цвет должен вернуться кнопке, когда вы уберёте от неё курсор мыши.

Сейчас создайте второе CSS-правило для той же кнопки. Поместите новое правило ниже первого.

.animated-btn  background-color: red; > .animated-btn  background-color: blue; > 

Откройте Инструменты разработчика браузера, и вы увидите, что оба правила сработали. Оба правила меняют стиль background-color и поэтому второе перекрыло первое:

Кнопка стала синего цвета. Теперь научите её реагировать на движение мыши.

1.3. Добавьте :hover

Теперь дело за малым: добавьте новому селектору ключевое слово :hover . Да, вот так просто:

.animated-btn  background-color: red; > .animated-btn:hover  background-color: blue; > 

Теперь кнопка меняет цвет при наведении:

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

Правило .animated-btn:hover говорит браузеру: Ищу тег с классом animated-btn , и чтобы на него смотрел указатель мыши. Когда мышь наведена на кнопку, то правило срабатывает. Как только мышь перемещается на другой тег — перестаёт.

Псевдокласс :hover появляется и исчезает при движении мыши

Есть ещё одна особенность у :hover . Псевдокласс получает не только один тег, но все его родители. В примере с кнопкой это будут сразу два тега и :

. body> button class="animated-btn">Кнопкаbutton> . 

1.4. Добавьте больше стилей

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

2. Как расширить область hover

Менять кнопку при наведении вы научились. А что, если вы хотите менять кнопку по наведению мыши на тег рядом с ней?

2.1. Запустите стартовый шаблон

Используйте наш стартовый шаблон, это красная кнопка внутри зелёного квадрата:

DOCTYPE html> html> head> meta charset="utf-8"> style type="text/css"> .animated-btn < background-color: red; >.btn-wrapper < height: 100px; width: 100px; background-color: green; display: flex; align-items: center; justify-content: center; >style> head> body> div class="btn-wrapper"> button class="animated-btn">Кнопкаbutton> div> body> html> 

Выглядит это примерно так:

2.2. Добавьте класс с новым стилем

Давайте сделаем кнопку синей. Но, на этот раз, при написании селектора сперва, выберите зелёный контейнер, а уже потом кнопку внутри него. Добавьте такое правило:

.btn-wrapper .animated-btn  background-color: blue; > 

2.3. Добавьте :hover

На этот раз :hover должен достаться селектору для зелёного прямоугольника:

.btn-wrapper:hover .animated-btn  background-color: blue; > 

Понять как работает селектор можно, прочитав его задом наперёд: Найди элемент с классом animated-btn , да такой, чтобы среди родителей у него был элемент с классом btn-wrapper и мышь была наведена на этого родителя. Вот как это выглядит в действии:

3. Что делать, если не получилось

Бывает такое, что пишешь анимацию, а она всё равно не работает. И что делать?

3.1. Проверьте, что один элемент внутри другого

Зайдите в Chrome Dev Tools и найдите элемент, к которому подключаете анимацию. Он точно внутри нужного тега?

3.2. Проверьте селектор

На вкладке Elements в Chrome Dev Tools нажмите комбинацию клавиш Ctrl+F . Откроется поле для поиска тегов. Вбейте туда свой селектор и нажмите Enter. Нужный тег должен подсветиться жёлтым цветом. Если этого не произошло, то ваш селектор написан неправильно.

3.3. Проверьте стили

Возможно ваш стиль просто не работает. Уберите :hover и проверьте, что стиль срабатывает правильно хотя бы без анимации.

Читать дальше

Попробуйте бесплатные уроки по Python

Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.

Переходите на страницу учебных модулей «Девмана» и выбирайте тему.

Источник