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
Чтобы активировать данный эффект, переместим опорную точку трансформации в центр, а также повернём сам элемент, чтобы реализовать трансформацию.
Цвет кнопки при наведении, отличный от класса в 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 — придется задавать его снова))
Как изменить цвет кнопки?
Для изменения цвета фона и текста кнопки используем, соответственно, свойства background и color, добавляя их к селектору button , как показано в примере 1.
Пример 1. Цветные кнопки
Основные параметры кнопки применяем к селектору button , а дополнительно вводим разные классы, чтобы легко менять цвет кнопок. На рис. 1 продемонстрирован результат данного примера, в котором создаются плоские одноцветные кнопки.
Рис. 1. Цветные кнопки
См. также
- background
- color
- currentColor
- text-fill-color
- Атрибут link
- Атрибуты
- Единицы цвета в CSS
- Кнопки
- Кнопки
- Кнопки в Bootstrap 4
- Линейный градиент
- Наследование в CSS
- Несколько фоновых картинок
- Работа с типографикой
- Создание кнопок
- Спрайты
- Установка фона и градиента
- Фоновая картинка
Как изменить цвет кнопки в форме?
Оформление кнопки зависит от параметров операционной системы и выбранного браузера. Поэтому одна и та же кнопка может различаться по своему виду в браузере Internet Explorer и Opera. Применение стилевого свойства background не только изменяет цвет фона у кнопки, но также меняет и ее вид, делая кнопку одинаковой в разных браузерах (пример 1).
Пример 1. Цвет кнопки
HTML5 CSS 2.1 IE Cr Op Sa Fx
Цвет кнопки
Результат примера показан на рис. 1.
Рис. 1. Вид обычной и цветной кнопки в браузере Safari
В данном примере стиль кнопки определяется с помощью пользовательского класса b1 , который задается в теге с помощью атрибута class .
Изменение вида кнопки обусловлено применением свойства background или background-color . Смена цвета текста или шрифта на кнопке оставляет исходным вид кнопки, в частности, ее форму и цвет фона.