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
Чтобы активировать данный эффект, переместим опорную точку трансформации в центр, а также повернём сам элемент, чтобы реализовать трансформацию.
Как изменить цвет кнопки при наведении?
Есть сайт almazsistem.ru
Цель: Нужно чтобы при наведении на кнопку, её цвет меняется с основного (#d2051e) на более светлый (#ff0826).
Сейчас я специально поменял цвет при наведении на белый, но на странице, при наведении, он выводится серым, будто его что-то перекрывает:
.button.primary:hover
Весь css в инспекторе облазил, ничего не видно, полюбому цвет меняет JS.
Подскажите какой код приписать или убрать, и от куда, чтобы заработало. Спасибо
- Вопрос задан более трёх лет назад
- 84 просмотра
Цвет кнопки при наведении, отличный от класса в css
задача в том что у меня более 200 различных цветов. В вопросе написал про три.
27 сен 2017 в 19:21
@RusBolik значит 1) надо было задачу полностью описывать)) 2) тут значит скорее всего нужен js
27 сен 2017 в 19:22
Алексей, может подскажите. Я в js скриптах полный ноль
27 сен 2017 в 19:24
@RusBolik тут зависит всё от исходных данных. что это за кнопки, откуда берутся, генерируются ли через PHP или это статичная разметка, какова в целом задача и пр. Чтобы посоветовать нужно больше входных данных. Например если генерируются кнопки, то самый простой вариант — писать атрибут data к ним с прикрепленным к ним цветом и уже при наведении брать оттуда цвет. Будет некий модифицированный вариант вот такого плана: jsfiddle.net/ohk18qda . но без полного конкретного описания сказать нельзя. Ну и т.к. это будет другой вопрос по js — придется задавать его снова))
Кнопка, изменяющая свой цвет
при наведении на нее курсора
Примеры переливающихся и меняющих свой цвет текстов мы уже рассматривали ранее. Теперь на очереди стоят кнопки (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" >
Еще не забудьте вставить в заголовок странички (между тегами
и ) стиль, который будет применен к нашим кнопкам при наведении на них курсора мышки:В результате у Вас все кнопки, описанные, как показано Выше, должны изменять свой цвет, при наведении на них курсора мышки.