Как сделать эффект вдавленной кнопки
Добавил пользователь Валентин П. Обновлено: 05.10.2024
Здесь не про дизайн. Здесь готовый код различных эффектов с подробными комментариями.
В дальнейшем эти эффекты можно будет применить к любой дизайнерской идее и создать оригинальную кнопку, которой нет больше ни у кого в интернете.
Нужно просто поиграть с цифрами в свойствах border-radius и box-shadow , поэкспериментировать со свойствами gradient и background
Все кнопки, показанные ниже, действующие. Выбирайте вариант, который вам понравится.
Варианты кнопок будут добавляться по мере создания.
Кнопка Многоцветная рамка Код
Кнопка 3D кнопка Код
Появление текста вращением Код
Появление текста из глубины Код
Кнопка Появление картинки Код
Кнопка с индикатором Код
Наведение и нажатие.
Появление вращающегося текста
Появление текста из глубины
Кнопка с индикатором
Не во всех кнопках свойство transform указано с необходимыми перфиксами, так что не забудьте их добавить, по примеру десятой кнопки.
У меня есть элемент изображения, который я хочу изменить при нажатии.
Но то, что мне нужно, это:
Но это не работает, очевидно. Можно ли вообще иметь onclick поведение в CSS (т.е. без использования JavaScript)?
:active работает, когда мышь не работает. В зависимости от того, что вы пытаетесь сделать, вы можете заставить его работать, используя псевдокласс CSS4 :target .
:target не является новым для Селекторов 4. Он был доступен начиная с Селекторов 3, который на момент написания уже был рекомендацией в течение года.
Самое близкое, что вы получите :active :
Однако этот стиль будет применяться только тогда, когда нажата кнопка мыши. Единственный способ применить стиль и оставить его примененным по клику - это использовать немного JavaScript.
Лучший способ (на самом деле единственный способ *) имитировать фактическое событие нажатия, используя только CSS (вместо простого наведения на элемент или активизации элемента, когда у вас нет mouseUp ), - использовать хак с флажком . Это работает путем присоединения label к элементу через for="" атрибут метки .
Эта функция имеет широкую поддержку браузера ( :checked псевдокласс IE9 +).
Базовая демонстрация взлома флажков (базовая структура кода для того, что вы спрашиваете):
Демонстрация для имитации эффекта нажатия кнопки, сверх того, что вы просите:
Большая часть CSS в этой демонстрации предназначена только для стилизации элемента label. Если вам на самом деле не нужна кнопка , и достаточно старого элемента, тогда вы можете удалить почти все стили в этой демонстрации, аналогично моей второй демонстрации выше.
Вы также заметите, что у меня есть одно свойство с префиксом -moz-outline-radius . Некоторое время назад Mozilla добавила это удивительное неспецифическое свойство в Firefox, но ребята из WebKit решили, что , к сожалению, добавлять его не собираются . Так что считайте эту линию CSS просто прогрессивным улучшением для людей, которые используют Firefox.
Потрясающие! Но есть ли способ отменить изменения также при нажатии в другом месте, кроме кнопки ввода / изображения /? Я использовал ваш пример для создания всплывающего поля и хочу, чтобы оно исчезло, когда посетители нажимают на пустую страницу. Спасибо!
Вы можете использовать псевдокласс :target для имитации события нажатия, приведу пример.
Стоит отметить, что это ограничено только гиперссылкой, поэтому, если вам нужно использовать другую ссылку, например, гиперссылку, например кнопку, вы можете немного ее взломать, например, стилизовать гиперссылку, чтобы она выглядела как кнопка.
Если вы дадите элементу a, tabindex то вы можете использовать :focus псевдокласс для имитации щелчка.
HTML
CSS
это работает достаточно хорошо! при использовании tabindex=-1 элемент все еще может быть сфокусирован, но только мышью, а не клавиатурой, что лучше в этом случае. Вы также можете использовать outline:0 стиль, чтобы убрать синюю рамку, когда сфокусированы
Изменить: Ответил, прежде чем ОП уточнил, что он хотел. Следующее предназначено для onclick, похожего на javascripts onclick, а не для :active псевдокласса.
Это может быть достигнуто только с помощью Javascript или Checkbox Hack
Вы также можете включить свои данные внутри метки, чтобы вам не приходилось использовать id атрибуты для их связывания.
TylerH сделал действительно хороший ответ, и мне просто пришлось обновить эту последнюю версию кнопки.
Приятно: активные стили; то, что я собирался, но был немного спешил, когда выстраивал их внешний вид.
Как насчет чистого решения CSS без хакерства?
@TylerH имеет отличный отклик, но это довольно сложное решение. У меня есть решение для тех из вас, кто просто хочет простой эффект "onclick" с чистым CSS без множества дополнительных элементов.
Мы просто будем использовать CSS-переходы. Вы могли бы сделать то же самое с анимацией.
Хитрость заключается в том, чтобы изменить задержку перехода, чтобы она продолжалась, когда пользователь щелкает.
Здесь я также добавляю класс "clicked", чтобы javascript мог также обеспечить эффект, если это необходимо. Я использую фильтр теней 0px, потому что он выделит прозрачную графику синим цветом для моего случая.
Это позволяет мне настроить его так, чтобы, когда пользователь нажимает кнопку, он подсвечивался синим цветом, а затем медленно исчезал (вы, конечно, могли бы использовать и другие эффекты).
Хотя вы ограничены в том смысле, что анимация для выделения является мгновенной, она все же обеспечивает желаемый эффект. Скорее всего, вы могли бы использовать этот трюк с анимацией для получения более плавного общего перехода.
ПОЭТОМУ сложность - это то, что необходимо для создания постоянного эффекта щелчка. Если вы просто хотите временно сделать что-то, что не сохраняет свое состояние, это или многие другие решения подойдут, и я согласен, что определенно менее сложный.
Согласовано. Все, что вам нужно, чтобы конечный результат был и всегда было полезно знать все варианты. Это отличная тема для тех, кто точно. Вероятно, стоит целая средняя статья, рассказывающая о каждой из них и о преимуществах каждой из них!
Хорошо, это может быть старый пост . но был первый результат в Google и решил сделать свой собственный микс на этом как ..
В первую очередь, я буду использовать фокус
Причина в том, что это хорошо работает для примера, который я показываю, если кто-то хочет событие типа мыши, тогда используйте active
Итак, почему я публикую это в старой ветке, хорошо, потому что примеры здесь различаются, и я подумал предоставить один обратно сообществу, которое является рабочим примером.
Как уже ответил создатель потока, они хотят, чтобы эффект длился только во время события click. Теперь, хотя это не точно для этой необходимости, его закрыть. active будет анимироваться, пока мышь не нажимает, и любые изменения, которые вам нужны, должны длиться дольше с помощью javascript.
Для всех, кто читает, в любом случае, чтобы заставить его переключаться? Или это слишком много спрашивает из CSS LOL?
Насколько я знаю, фокус / активный / наведение примерно настолько близок, насколько вы можете получить с помощью css. Возможно, вы сможете сделать что-то необычное с опцией / выбрать тип кода. Но пока не пробовали / не нуждались в этом
Предупреждение! Особенно простой ответ ниже! :)
Так что взгляните на ответы Bojangles и TylerH, если они вам подходят, но если вы хотите получить простой и CSS-ответ, который оставит блок видимым после нажатия (и даже может заставить блок исчезнуть при последующем щелчке), затем увидеть это решение.
У меня была похожая ситуация, мне нужно было всплывающее окно div с onClick, где я не мог добавить JS или изменить разметку / HTML (действительно решение CSS), и это возможно с некоторыми предостережениями. Вы не можете использовать трюк: target, который может создать приятное всплывающее окно, если вы не можете изменить HTML (чтобы добавить 'id'), чтобы его не было.
В моем случае всплывающий элемент div содержался внутри другого элемента div, и я хотел, чтобы всплывающее окно отображалось поверх другого элемента div, и это можно сделать с помощью комбинации: active и: hover:
Пример (а также тот, который позволяет нажать на всплывающее окно, чтобы оно исчезло) по адресу:
Замечательная коллекция кнопок на CSS и HTML с валидным и качественным кодом для современного сайта, чтобы оформить меню, ссылки, вход в профиль, кнопки добавить комментарии (купить, открыть, или пройти на страницу), изменить дизайн перехода на предыдущую страницу, табы и т.д.
Дополнительно рекомендуем обзор с 26 простыми кнопками CSS, HTML, только чистый код (без JS) можно посмотреть, опробовать, по-нажимать и увидеть наглядный результат.
Как сделать кнопку на CSS
Если кому интересно читаем тут описание, из каких элементов и тегов состоит кнопка для сайта или пропускаем смотрим примеры ниже.
Самый простой способ изменить цвет, шрифт, размер, тень, градиент и другие стили кнопки HTML не нарушая целостности кода, воспользоваться супер инструментов вашего браузере. Подойдет для этих целей Мозила, Опера, Гугл Хром, Яндекс.Браузер и другие программы в которых встроен инструмент "Веб-разработка".
Как пользоваться инструментом "Веб-разработка Firefox Mozilla" подробно инструкция в картинках.
Простая HTML кнопка для сайта может содержать значение input, при создание кнопки с тегом button по своему действию напоминает результат, получаемый с помощью тега input (с атрибутом type="button | reset | submit"). Функционально и внешне они относительно одинаковы. Внутри тега button каждый вебмастер может добавить отформатированный текст, или подходящее изображение. Различаются эти элементы и кнопки с применением тега input (c атрибутом type = "button") несколькими параметрами.
Главным отличием тега button, это расширенные возможности по созданию кнопок HTML. Например, вы можете размещать любые элементы HTML и изображения. Применив стили, можно изменить внешний вид кнопки, шрифт, цвета фона, градиент, размеры и другие параметры.
Когда применяется тег button?
- тег button в качестве открывающегося и закрывающегося значения, может включать дочерние теги,
- если текст на кнопке один, то применяется значение value, а при нажатие на копку может передаваться другой.
Как изменить вид кнопки при наведении, сделать эффект нажатия? Динамические эффекты вы сможете реализовать с помощью псевдоклассов:
:hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
:active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
:focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в "половинном" состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.
Сложнее всего сделать и продумать вид, задать параметры, понять, как должны изменяться эффекты во время нажатия кнопки, не нарушая целостность дизайна или вёрстки страницы. Чаще всего самый простой внешний вид, выглядит более стильно, чем навороченная с крутыми элементами и цветом кнопка. Большая коллекция кнопки CSS / HTML
Стилизация ссылок и кнопок на примере разных сайтов с поддержкой разными состояний – наведение курсора, нажатие, попадание в фокус и заблокированное состояние элемента.
Скругленная кнопка
Результат:
Двойная рамка
Результат:
Yahoo
Результат:
Результат:
Результат:
Результат:
Вконтакте
Результат:
Результат:
Bootstrap
Результат:
Комментарии 1
Другие публикации
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.
Ниже приведенная функция getPosition() получает текущие координаты курсора. Используя ее в разных jQuery событиях можно получить координаты клика или координаты курсора когда он находится над.
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют.
Читайте также: