Кнопка, которая при нажатии оставалась «нажатой»
Хочу сделать css кнопку которая при нажатии оставалась «нажатой» (т.е. active). Искал в интернетах, нашел что это можно сделать с помощью JS (onclick и т.п.). Я пробовал , но не смог.
Кто может помочь или подсказать?
Необходимо, чтобы при нажатии на кнопку «Регистрация» Выводилось сообщение: «Точно отправить форму?».
Возник вопрос, у меня есть форма, в которой необходимо заполнить поля и в ней происходит проверка.
При нажатии на кнопку «Всем привет» вывести сообщение `alert(«привет»)` кнопку удалить и добавить новую кнопку.
как сделать чтобы при нажатие на кнопку всем привет выводилось сообщение alert("привет") кнопка.
При нажатии на кнопку «Сбросить » не запускается функция clear()
При нажатии на кнопку "Сбросить " не запускается функция clear() <!doctype html> <head> .
При нажатии кнопки выводить сообщение «Товар добавлен в корзину.»
Код кнопки . В данном коде менять ничего нельзя, так как код генерируется iikostyle <span.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> head> style> .css-button { display: inline-block; padding: 1em 3em; background-color: #0f0; cursor: default; } .css-button-pressed { display: inline-block; padding: 1em 3em; background-color: #0f0; box-shadow: inset 0 0 20px #000; } style> body> div class="css-button"> Click me! div> body> script src="jquery-3.3.1.min.js"> script> script> $(function() { $(".css-button").click(function() { $(this).toggleClass("css-button-pressed"); }); }); script> html> 
Сообщение от GRO_UA 
input type="checkbox" class="btn-chk" id="btn"> label for="btn" class="btn">Click me!/label>
1 2 3 4 5 6 7 8 9 10 11 12 13
.btn{ display: inline-block; padding:5px; border:1px solid black; background-color:#eee; cursor:pointer; } .btn-chk{ display: none; } .btn-chk:checked + .btn{ background-color:#ccc; }
Если нужно только визуально, то можно не подключать JQuery. И даже нативный JS можно не использовать — https://codepen.io/qwerty_wasd/pen/xJbrzJ
input id="button" type="checkbox"/> label for="button">Кнопка/label>
1 2 3 4 5 6 7 8 9 10 11 12 13 14
#button{ position:absolute;clip:rect(0,0,0,0); } label[for="button"]{ border:1px solid #000; border-radius:5px; padding:10px; background:#009688; box-shadow:inset -5px -5px 45px 0px rgba(122,122,122,0.6),inset -3px -3px 10px 0px rgba(0,0,0,0.6); cursor:pointer; } #button:checked ~ label[for="button"]{ box-shadow:inset 5px 5px 45px 0px rgba(122,122,122,0.6),inset 3px 3px 10px 0px rgba(0,0,0,0.6); }
Конечно при нажатии на кнопку, что должно происходить, иначе зачем она нужна. Можно повесить на неё обработчик.
document.querySelector('label[for="button"]').addEventListener('click',function(){ //ваш код })
спасибо всем, буду пробовать=)
Добавлено через 22 часа 33 минуты
не ребят, не помогло
Вот мой код (знаю что корявый)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
html> head> title>Print Work/title> link rel="stylesheet" type="text/css" href="style.css"> link rel="icon" href="images/iconka.png"> /head> body> div class="button">/div> script src="JS.js">/script> /body> /html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
body{ height: 100%; background: linear-gradient(45deg, rgba(34, 101, 163, .5), rgba(103, 0, 31, .6) ), url(images/fon.jpg); } /*.wrap */ .button { width: 70px; height: 70px; border-radius: 50%; margin-left:20px; margin-top:20px; transition: 0.45s ease-in-out; background: radial-gradient(farthest-side ellipse at top left, white, #aaaaaa); box-shadow: inset 0 -3px 10px rgba(140, 140, 140,1), inset 0 3px 10px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.9); } .button:hover { background: radial-gradient(farthest-side ellipse at top left, white, #c4c2c2); } .button:active { background: url("images/icon.png") , radial-gradient(farthest-side ellipse at top left, #eb7fff, #c56bd6); transform: rotate(360deg); box-shadow: 0 0px 10px rgba(0,0,0,.5) inset, 0 2px 50px rgba(0,0,0,.5) inset, 0 2px 10px rgba(255,255,255,.1);
Вот эту анимированную кнопку хотелось бы оставить в состояние «.active «
document.querySelector('button').addEventListener('click',function(){ alert('he work!') })
В дальнейшем с помощью JS хотелось бы вызвать анимацию основного меню (если это возможно).
Ну, типо, нажимаем на кнопку вылезает меню. Нажимаем еще раз, меню «скручивается» обратно .
Состояния кнопок
Любая кнопка, если она не заблокирована, может находиться в определённых состояниях, которые связаны с соответствующими псевдоклассами:
Далее рассмотрим эти состояния подробнее.
Активная кнопка
Это состояние возникает, когда на кнопку нажали, но ещё не отпустили (через клавишу мыши или палец на смартфоне). Для изменения стиля активной кнопки к селектору button или соответствующему классу добавляется псевдокласс :active. Его задача показать пользователю, что кнопка прореагировала на нажатие.
В примере 1 к кнопке добавлена тень через свойство box-shadow. У псевдокласса :active тень убирается, а сама кнопка сдвигается вниз и вправо на величину тени. Тем самым при щелчке по кнопке возникает эффект её утопления.
Пример 1. Использование :active
Плавность «хода» кнопки достигается через свойство transiton, которое устанавливает время анимации. Если это свойство убрать из кода CSS, то кнопка будет смещаться мгновенно.
Фокус
Фокусом в HTML называется выбор элемента и его готовность взаимодействовать с пользователем. К примеру, фокус на текстовом поле позволяет писать в этом поле текст при помощи клавиатуры. Фокус на переключателе даёт возможность через пробел ставить и убирать галочку. В общем, фокус показывает пользователю, какой элемент в данный момент активен, и даёт пользователю возможность взаимодействовать с этим элементом через клавиатуру
Кнопка обычно получает фокус, когда на клавиатуре несколько раз нажимают клавишу Tab , по очереди переходя от одного элемента к другому. Вокруг кнопки с фокусом по умолчанию отображается синий контур (рис. 1).
Рис. 1. Кнопка, получившая фокус
Используя псевдокласс :focus и добавляя его к селектору button или соответствующему классу, можно установить стиль кнопки с фокусом. В примере 2 вокруг кнопки добавляется контур жёлтого цвета через свойство outline.
Пример 2. Использование :focus
Если вместе с псевдоклассом :focus добавляется :active , то для правильной работы важно сохранить их порядок в коде CSS:
Кнопка при наведении курсора
Псевдокласс :hover отвечает за стиль кнопки при наведении на неё курсора мыши. У кнопки таким образом допустимо менять цвет фона, текста и другие параметры. Сама смена происходит мгновенно и для плавности можно добавить свойство transition, указав желаемое время перехода. В примере 3 при наведении на кнопку у неё плавно, в течение полсекунды, меняется цвет фона с тёмного на жёлтый.
Пример 3. Использование :hover
Свойство transition у класса .btn работает в обе стороны — цвет фона меняется плавно при наведении на кнопку курсора и при его уведении. Если transition перенести из класса .btn в селектор .btn:hover , то при наведении на кнопку цвет фона будет меняться плавно, а при уведении вернётся к исходному значению резко.
При наличии других псевдоклассов опять же важен их порядок в CSS. :hover идёт всегда первым, затем уже добавляется :focus и : :active .
Итоги
- Кнопка может находиться в трёх состояниях: активная кнопка; получившая фокус; на кнопку навели курсор мыши.
- За стиль активной кнопки отвечает псевдокласс :active.
- За стиль кнопки, получившей фокус, отвечает псевдокласс :focus.
- За стиль кнопки, на которую навели курсор мыши, отвечает псевдокласс :hover.
- Важен порядок написания этих псевдоклассов в CSS. :hover идёт первым, :active пишется последним:
- :hover
- :focus
- :active
Создайте кнопку, чтобы при наведении на неё курсора мыши она меняла цвет фона и рамки (рис. 1). Обратите внимание на следующие моменты:
- используется жирный шрифт;
- к тексту добавлена небольшая полупрозрачная тень;
- у самой кнопки имеется внутренняя тень;
- время смены цветов установите в полсекунды.
Создайте кнопку, чтобы при наведении на неё курсора мыши она плавно меняла цвет фона и текста, как показано на рис. 1.
Создайте кнопку, чтобы при щелчке у неё исчезала линия снизу и кнопка сдвигалась вниз, как показано на рис. 1.
См. также
- :focus для полей формы
- :focus на мобильных устройствах
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- Анимация ссылок при наведении
- Виды ссылок
- Всплывающая подсказка
- Использование :hover
- Нормальное позиционирование
- Переходы с помощью :hover
- Подсветка строк и колонок таблицы
- Псевдокласс :active
- Псевдокласс :focus
- Псевдокласс :focus-within
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Свойство border
- Селекторы CSS
- Сочетание с псевдоклассами
- Типы ссылок
Рецепты
Стилизуем кнопки правильно
Кнопки есть практически в любом приложении. В их роли могут выступать самые разные элементы — собственно кнопки, ссылки и даже простые спаны. В любом случае важно правильно их оформить. В этом руководстве мы займемся созданием CSS-компонента кнопки.
Сброс стилей элемента
Выбор правильного элемента имеет несколько преимуществ: это SEO-friendly и делает ваш сайт более доступным при работе с клавиатуры и для скринридеров.
Однако разработчики редко используют элемент . На большинстве сайтов кнопки представлены тегами , или . В чем причина такой нелюбви?
- Незнание. Некоторые разработчики даже не догадываются, что тег button можно использовать вне форм.
- Сложности стилизации. У кнопок очень много стилей по умолчанию, которые мешают созданию кастомного дизайна.
К счастью, у нас есть CSS reset. Давайте сбросим стили кнопки и сделаем ее похожей на обычный текст:
Минус этого подхода заключается в том, что стиль сбросился у ВСЕХ кнопок, и теперь посетитель сайта не сможет опознать их на странице.
Можно воспользоваться препроцессором (SCSS) и написать миксин для использования в нужных местах:
Создание CSS-компонента кнопки
Теперь, когда мы удалили все лишнее, давайте определим собственные стили для кнопки. Создадим для этого отдельный класс .btn , который можно будет указать и для button , и для a , и для любого другого элемента.
Внимание: при разработке CSS-компонента кнопки важно учитывать, что он может быть применен к ссылкам. Значит, необходимо изменить также дефолтные свойства ссылок.
Избегайте использования для кнопок цветов с малым контрастом. Часть ваших пользователей может иметь проблемы со зрением, а другая изучает сайт в неблагоприятных условиях (например, на телефоне под светящим солнцем) — не затрудняйте им жизнь.
Стилизация различных состояний
Кнопка уже выглядит неплохо, но кое-чего не хватает. Это интерактивный элемент, имеющий несколько состояний. Мы должны стилизовать и их.
У браузеров есть собственные дефолтные стили для состояний :focus (фокус на кнопке) и :active (нажатие), но часть из них мы уже сбросили. Не забудем также про состояние :hover (наведение курсора).
- Для нажатой кнопки создадим олдскульный эффект «утопления» с небольшим изменением насыщенности.
- При наведении курсора поменяем местами цвета фона и текста и добавим рамку.
- Для обозначения фокусировки используем такой же стиль.
Обратите внимание: стили фокуса очень важны. Многие пользователи по разным причинам пользуются клавиатурой для навигации по странице. Только стилизованный :focus помогает им понять, где они находятся в данный момент.
Только после того как мы позаботились о собственном оформлении фокуса можно убрать у кнопки дефолтные браузерные стили ( outline ).
Разбираемся с «липким» фокусом
Осталось решить еще одну небольшую проблему.
В ряде браузеров когда вы кликаете на ссылку или кнопку, она получает два псевдокласса: :active и :focus .
:active убирается сразу после того, как вы перестали нажимать на кнопку мышки или трекпад. Но :focus зачастую остается до тех пор, пока вы не кликнете на какой-нибудь другой элемент страницы.
Это поведение можно пофиксить с помощью нового псевдокласса :focus-visible.
Это свойство еще не принято официально, но идея заключается в том, что состояние :focus-visible устанавливается для элемента только при получении фокуса с клавиатуры (а не при клике).
При необходимости можно использовать JS-полифилл.
Давайте разделим состояния :hover и :focus в нашем компоненте:
Теперь подключим полифилл focus-visible.js. Он добавит элементу body класс js-focus-visible . Используем его, чтобы удалить тень с элементов, у которых нет класса focus-visible (то есть тех элементов, на которых сфокусировались не с клавиатуры):
.js-focus-visible .btn:focus:not(.focus-visible)
Кажется, было бы проще установить стили только для .focus-visible элементов, однако, так мы лишимся фоллбэка на тот случай, если скрипт не сработает.