Как сделать кнопку при нажатии меняет цвет
Добавил пользователь Alex Обновлено: 05.10.2024
У меня есть несколько кнопок, которые я использую, когда люди отвечают на вопрос. Как я могу заставить кнопки менять цвета, когда человек нажимает на кнопку? Я не знаю jquery, мне сказали, что это лучшее, что можно использовать для этого
вот код, который у меня в виде HTML:
Я действительно Новичок в кодировании, поэтому любая помощь будет оценена!
обновленный ответ для вашего комментария.
Я бы просто создал отдельный класс CSS:
и затем добавьте класс по щелчку:
это должно делать то, что вы ищете, показывая этот jsFiddle. Если вам интересно о логике с ? и такое, ее называют троичные (или условные) операторы, и его просто краткий способ сделать простую логику if, чтобы проверить, был ли класс уже добавлен.
вы также можете создать возможность чтобы иметь ощущение включения / выключения, переключая класс:
показали этот jsFiddle. Просто пища для размышлений.
добавьте следующий код на свою страницу:
вы должны включить структуру jquery в голову документа из cdn, например:
тогда вы должны включить собственный скрипт, например:
эта часть является отображением $ в jQuery, поэтому на самом деле это jQuery('selector').функция();
Используйте свойство background-color для изменения цвета фона кнопки:
Пример
Размеры кнопок
Используйте свойство font-size для изменения размера шрифта кнопки:
Пример
Используйте свойство padding для изменения заполнения кнопки:
10px 24px 12px 28px 14px 40px 32px 16px 16px
Пример
Закругленные кнопки
Используйте свойство border-radius для добавления скругленных углов к кнопке:
Пример
Цветные границы кнопок
Используйте свойство border , чтобы добавить цветную рамку к кнопке:
Пример
Наведите кнопки
Используйте селектор :hover для изменения стиля кнопки при наведении на нее указателя мыши.
Пример
.button <
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
>
Кнопки теней
Use the box-shadow property to add shadows to a button:
Пример
.button1 <
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
>
.button2:hover box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
>
Отключенные кнопки
Используйте свойство opacity для добавления прозрачности к кнопке (создает "отключенный" вид).
Совет: Вы также можете добавить свойство cursor со значением "not-allowed", которое будет отображать "нет парковки знак" при наведении указателя мыши на кнопку:
Пример
Ширина кнопки
По умолчанию размер кнопки определяется по ее текстовому содержимому (так же широко, как и ее содержимое). Используйте свойство width для изменения ширины кнопки:
Пример
Группы кнопок
Удалите поля и добавьте float:left к каждой кнопке, чтобы создать группу кнопок:
Пример
Группа кнопок на границе
Используйте свойство border для создания группы кнопок с рамками:
Пример
Вертикальная группа кнопок
Используйте display:block вместо float:left для группирования кнопок ниже друг друга, вместо того, чтобы бок о бок:
Пример
Кнопка на картинке
Button
Написание лайфхаков на Python
Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.
Помимо самих уроков Вы так же получаете и множество упражнений. По сути, Вы создадите свои собственные 20 небольших проектов, благодаря чему у Вас появится и практика, и портфолио.
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписаться
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Подписаться
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Чтобы получить готовый css код кнопки нажми на нее и скопируй.
Все параметры кнопки
Выбери шрифт у кнопки
Как сделать кнопку в генераторе css
Чтобы сделать красивую кнопку css воспользуемся генератором. У кнопки есть параметры.
- Размер кнопки css. Изменяем форму кнопки высоту и ширину кнопки.
- Размер текста у кнопки. Задается свойством font-size.
- Закругление краев. Если нужна круглая кнопка используем свойство border-radius: 50%.
Зададим все цвета кнопки css.
- Верхний цвет градиента. Установим цвет в позиции top.
- Нижний цвет градиента. Задаем в позиции bottom.
- Полоса сверху кнопки. Дополнительная функция украшения.
- Цвет при наведении. Используем класс hover.
- Цвет текста. Подбираем цвет контрастный цвету кнопки.
- Цвет текста кнопки после наведения. Если изменим фон со светлого на темный, то и цвет должен стать другим.
- Цвет кнопки при нажатии. Установим третий цвет для класса active.
После установки всех параметров наживаем на скопировать код кнопки css и переносим в проект. В файле индекса зададим html код для кнопки с классом button. Теперь можно с генерировать тень box shadow и добавить ее при наведении на кнопку, получится красивый эффект.
оформление кнопок css
Чтобы сделать красивую html кнопку воспользуемся псевдоклассами.
- &:active момент нажатия на кнопку добавляем свойство изменение цвета.
- &:hover навели курсор мышки на кнопку и она изменила цвет текста и фона.
Чтобы сделать кнопку по центру используем свойство margin: 0 auto. Подробно о позиционирование элементов написано тут.
Примеры красивых кнопок css
Рассмотрим стили css у 12 разных видов кнопок.
Прозрачная кнопка css
Оформить Прозрачная кнопка Ку Вторая прозрачная кнопка Заказать Кнопка с деформацией Заказать Стиль кнопки с изменением положения Заказать Стиль с бликом Заказать Кнопка с цветовой полосой Заказать Кнопка с объемным цветом Заказать Кнопка с бликом
Читайте также: