Как изменить цвет кнопки: полная инструкция для новичков
Кнопка внутри формы (button type=»submit»)
Просто меняем фон и цвет:
Меняем через псевдоэлемент :before (обратите внимание на span, который нужно разместить внутри кнопки) :
Кнопка внутри формы (input type=»submit»):
Тот же самый принцип, что и выше, но вместо button[type=»submit»] нужно в css прописать input[type=»submit»]
Кнопка, как отдельный элемент в html кода:
Просто меняем фон и цвет:
А теперь меняем цвет, с помощью псевдоэлемента :before
Кнопка в Bootstrap
Чтобы изменить цвет кнопки в Bootstrap, вам необходимо найти нужный класс (или id), а также нужный порядок вложенности элементов.
К примеру, у вас есть кнопка
И вы хотите изменить для нее цвет при наведении. Тогда я бы рекомендовал в css прописать следующее:
Как изменить цвет кнопки с помощью Js
Я покажу два варианта, как поменять цвет кнопки при наведении используя JavaScript.
Первый вариант — мы будем добавлять класс с нашей кнопки через js:
Второй вариант — мы будем менять css стили прямо в js:
Надеюсь, я помог вам разобраться, как можно изменить цвет кнопки при наведении на нее курсором. В заключении рекомендую посмотреть видео, чтобы окончательно развеять все вопросы.
Три эффекта наведения на кнопку
На этом уроке мы разберем три разных эффекта при наведении на кнопку.
Посмотрите демо на 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;
>
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Hover — эффекты при наведении
Мы задали цвет фона и текста, радиусы закругления, размер шрифта, отступы. Для анимации используем transition: all 500ms ease, которое означает, что в нужный момент будут анимированы все свойства в течение 500 миллисекунд.
Горизонтальная заполнение
Полупрозрачный фоновый цвет постепенно заполняет кнопку при наведении. Обычно заполнение происходит с какой-то одной стороны и переход длится до тех пор, пока вся кнопка не будет заполнена.
Чтобы достичь такого результата, нужно использовать псевдо-элемент :before:
Данный контент абсолютно спозиционирован и расположен в верхнем левом углу кнопки. Зададим ширину равную 0px, потому что именно этот параметр мы будем анимировать. Чтобы анимировать его, мы просто изменим его ширину:
Вертикальное заполнение
Если анимировать высоту, то заполнение произойдёт сверху.
Инвертирование цвета
Инвертируем цвет внутри кнопки и добавляем границу:
Пунктирная граница
Добавим границу у кнопки и инвертируем цвета:
Появление значка
При наведении значок плавно появиться слева от текста.
Подключим шрифт со значками Font Awesome.
Увеличим внутренний отступ, чтобы для значка было место, и добавим свойство overflow со значением hidden:
Далее добавляем значок из шрифта Font Awesome в псевдо-элемент before и размещаем его за пределами кнопки:
Осталось установить свойство left:
Эффект подпрыгивания
Для данной анимации установим несколько ключевых кадров (keyframes):
Подключаем созданную анимацию:
Искажение
В CSS3 появилась возможность использовать искажения:
3D-поворот
Самый сложный эффект. Используем поворот кнопки для отображения другого сообщения, которое мы добавим в псевдо-элемент after у нашей кнопки.
Зададим для свойства transform-style значение preserve-3d, чтобы все дочерние элементы кнопки находились в 3D-пространстве:
Установим правила для псевдо-элемента after:
Правила добавлены сверху, перед кнопкой, и выставлены такие же параметры width и border-radius, как и у самой кнопки. Что касается свойств трансформации, то в качестве опорной точки, относительно которой будет происходить трансформация, установлен нижний левый угол элемента и указано вращение по оси X со значением 90 градусов, чтобы элемент казался плоским. Сейчас осталось только создать анимацию при наведении:
Чтобы активировать данный эффект, переместим опорную точку трансформации в центр, а также повернём сам элемент, чтобы реализовать трансформацию.
transition
Свойство transition используется, когда нам нужно плавно изменить CSS-свойства между двумя состояниями элемента. Например, при наведении мышкой.
Пример
Скопировать ссылку на секцию «Пример» Скопировано
Подробно
Скопировать ссылку на секцию «Подробно» Скопировано
Свойство transition это шорткат. Как, например, margin или background . Оно включает в себя несколько подсвойств:
-
— указываем свойство, которое хотим плавно изменить; — длительность перехода; — функция, описывающая скорость изменения свойства; — задержка перед началом изменения.
Как записывается
Скопировать ссылку на секцию «Как записывается» Скопировано
Применить к одному свойству:
- Порядок записи: имя свойства | длительность:
- Порядок записи: имя свойства | длительность | задержка:
- Порядок записи: имя свойства | длительность | временная функция | задержка:
Применить к двум свойствам:
Применить ко всем свойствам, которые будут меняться:
Как понять
Скопировать ссылку на секцию «Как понять» Скопировано
Предположим, у нас есть кнопка, у которой мы хотим изменить фон при наведении мышкой.
Тогда можно сказать, что у кнопки есть два состояния:
- Базовое состояние, когда мышка не над кнопкой
- Состояние при наведении курсора мыши (ховер-состояние)
Стили для двух этих состояний могут быть записаны в CSS вот так ��
Стили для базового состояния:
Стили для ховер-состояния:
Чтобы при наведении фон кнопки изменялся не скачком, а плавно, мы используем свойство transition для плавного изменения цвета фона.
Стили для базового состояния:
Стили для ховер-состояния:
Если мы хотим плавно изменить два и более свойств, нужно просто перечислить их через запятую.
Стили для базового состояния:
Стили для ховер-состояния:
Не забывай о том, что вместе с изменяемым свойством обязательно должна указываться длительность изменения ( .5s ).
Подсказки
Скопировать ссылку на секцию «Подсказки» Скопировано
�� Обратите внимание, что свойство transition мы задали в стилях для базового состояния. Таким образом, мы заранее говорим браузеру, какое свойство должно изменяться плавно.
�� С помощью transition можно плавно изменять любое свойство, у которого значение записывается с помощью чисел (например, margin ). Исключения: visibility , z — index .
�� По возможности старайтесь не использовать слово all для описания перехода ( transition : all . 3s ). Да, это проще на первоначальном этапе, но позже из-за этого в какой-то момент могут начать плавно изменяться свойства, которые не должны этого делать. Ну и вообще, когда браузер встречает слово all , он начинает перебирать каждое свойство элемента в поисках необходимого. Это ненужная нагрузка.
�� Старайтесь использовать для анимации в первую очередь свойства transform и opacity — они самые производительные, потому что не приводят к перезапуску процессов Layout и Paint. Изменяйте свойства left , top , margin , padding , width , height и прочие с осторожностью, только когда без этого никак не обойтись.
Особенности
Скопировать ссылку на секцию «Особенности» Скопировано
�� Вторым состоянием необязательно должно быть состояние при наведении. Это может быть состояние :focus , :active , :checked или, например, появление дополнительного класса.
�� Мы можем настроить transition таким образом, что при изменении состояния переход будет выполняться с одной скоростью, а при обратном изменении состояния — с другой.
Стили для базового состояния:
Стили для hover-состояния:
Обратите внимание, в этом случае свойство transition задаётся для обоих состояний.
�� Длительность перехода может задаваться в секундах ( 0 . 3s ) или в миллисекундах ( 300ms ). Ноль перед точкой можно не писать ( .3s ).
�� Значение свойства z — index записывается числом, но его нельзя плавно изменить никаким способом.
�� Значение свойства visibility записывается строкой, но его в связке с opacity можно плавно изменять при помощи transition .
�� Кроме использования для изменения внешнего вида элемента, transition прекрасно подходит для решения задач с появлением элементов. Например, при реализации тултипов или всплывающих меню:
Обратите внимание, что мы прописали visibility как одно из свойств, которое нужно плавно изменить. Это работает в связке с opacity и обеспечивает возможность плавного появления и скрытия элемента:
Если использовать только opacity , то элемент станет невидимым, но будет доступен для взаимодействия с мышкой и клавиатурой.
Если использовать только visibility , то скрытие и появление не будет плавным.