Эффекты нажатия на кнопки


Содержание

Как сверстать кнопку с эффектами наведения и нажатия?

Как можно сверстать кнопку с эффектами наведения и нажатия? На картинке первое изображение по умолчанию, второе при наведении, третье при нажатии.

Проблема в следующем. Во-первых, изображение с прозрачным фоном, и если вставлять его фоном кнопки, то прозрачный фон заменяется белым фоном. Также непонятно, как сделать эффекты наведения и нажатия на кнопке.

Если делать дивом, то проблема в том, что картинка будет загружаться при наведении, то есть пользователь не сразу видит, что картинка поменялась при наведении.

Эта кнопка используется для отправки формы. Как можно её лучше реализовать? Ещё можно ли, чтобы текст на кнопке был текстом, а не картинкой?

1 ответ 1

Во-первых сохраняйте картинку не в jpg, а в png c прозрачностью, тогда никакого белого фона не будет. Во-вторых сохраните её именно в таком вариант, в котором вы нам показали ( так называемый sprite ).

Сделайте ссылку блочной и задайте ей ширину и высоту одной из трёх картинки вашего спрайта. Укажите background: url(../sprite.png) 0 0 no-repeat; и по умолчанию будет выводится первая картинка. Чтобы менять картинки при наведении и нажатии, достаточно в стилях прописать что-то типа:

Как видите текст я сделал белым и выровнял по центру по ширине и высоте. Для этого наши картинки нужно сохранить без текста.

Кнопки | CSS

Простая HTML кнопка для сайта

Есть несколько типов input для создания кнопки и тег button [ type=»button | reset | submit» ]. Внешне и функционально они абсолютно одинаковы.

Когда использовать тег button?

  • button имеет открывающий и закрывающий тег, а значит он может содержать дочерние теги,
  • когда текст на кнопке один, а значение value при клике должно передаваться другое.

Как сделать кнопку на CSS

Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку.

Создание кнопки: «А нужно ли изменять вид кнопки при наведении или делать кнопку с эффектом нажатия?»

Динамические эффекты реализуются благодаря псевдоклассам:

  • :hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
  • :active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
  • :focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в «половинном» состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.

Надо признать, что сложнее всего придумать как будет вести себя кнопка во время нажатия.

Код кнопки для сайта

Иногда самый простой внешний вид может выглядеть более стильно, чем навороченная с крутыми эффектами кнопка. Взгляните, как она тут [cssdeck.com] смотрится.

Кнопка с градиентом

Градиенты плохо поддаются анимации, плавной смене цвета фона. Что же делать? Ответ: box-shadow [перейдите по ссылке, там есть суперская форма входа].

А вот всякие перемещения работают на ура.

Довольно популярно разделение кнопки на два цвета

Красивые кнопки CSS

Кнопки «Скачать» CSS

Стилизация кнопок с помощью CSS

Анимированная кнопка: «свечение текста»

Стиль кнопок с бликами

Кнопки меню

Объёмная кнопка CSS

Вдавленная кнопка

Выпуклая кнопка HTML

Круглые CSS кнопки


Анимированная кнопка CSS

Анимированное заполнение происходит так (тут нет лишнего кода, связанного с кнопкой). Другие интересные эффекты загрузки можно найти тут [tympanus.net].

3d кнопка CSS

Оформление кнопок

Кнопки сайта следует выполнять в едином стиле, чтобы не оставалось сомнений, что если здесь нажать, то произойдёт какое-то действо.

Кнопка с главным действием должна выделяться из общего содержания, быть контрастной. Тут главное не переусердствовать. Так, например, у интернет магазина e5 это приятно для глаза: А тут с оранжевым явный перебор, даже на изображении сложно остановить взгляд:

Именно поэтому у Google второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.

Также нужно победить желание сделать кнопку величиной со слона, чтобы не стать объектом баннерной слепоты.

98 комментариев:

damir-tote Спасиб NMitra, что подобное искал =) А не можешь еще показать, как сделать вертикальное выпадающее меню, только не вбок, а вниз)) NMitra См. http://shpargalkablog.ru/2011/07/accordion-css.html

В качестве содержания добавляйте список ol из ссылок. Дмитрий Вып. список это просто) Даже просто введя в гугл вып список на цсс можно найти NMitra Посмотрите последний пример http://shpargalkablog.ru/2012/04/display-block-inline-css.html с наведением на пункт меню или с постановкой галочки справа. Есть вариант с :focus, но в Хроме нужно подключать картинку, я не стала поэтому расписывать.

Это на CSS, а можно ещё добавить небольшой скрипт. segur Как мне нравится этот блог ! Этот сайт давно у меня в «золотых» закладках !

Спасибо за Ваши толковые статьи и примеры ! NMitra Благодарю за комментарий! Настроение сразу вверх растёт. Анонимный Спасибо большое автору, очень помогло на практике. NMitra Рада, что мои записи вам пригодились :) Анонимный Если нахожу что-то полезное на сайте, всегда благодарю автора не словами, а кликами по всем рекламным блокам которые нахожу на странице. В этот раз пришлось искать все рекламные блоки. Спасибо автору. NMitra Повеселили по поводу «пришлось искать все рекламные блоки» :) Спасибо, что заботитесь о моём благосостоянии и оценили статью. Алексей А онлаайн генератором можно создать кнопку под свой вкус http://phpguru.com.ua/servis/css3button/ русскоязычный генератор css3 кнопок. Не сочтите за спам но мне понравился! NMitra Проглядела много генераторов кнопок и не представляю как с их помощью можно сделать хоть что-то приемлемое. В статье я просто привожу примеры и надеюсь, что их код не будут брать целиком. Можно посмотреть как реализована тень текста на кнопках, как создаётся эффект нажатия, как сделать, чтобы один текст заменялся другим и при этом правильно выравнивался, какие цвета чаще всего используют, как сделать неполные боковые линии и т.п. Это именно черновой вариант, который можно и нужно изменять, как минимум высоту и ширину. Станислав Автору поклон за труды! Кладезь полезных решений для любого проекта. Выразил благодарность еще и переходом по рекламе — идея порадовала:) NMitra Благодарю, Станислав. Да, одно время не могла пройти мимо интересной кнопки, пусть даже нарисованной. Надо код немного доработать, а то в Safari кое-где ерунда получается. Например, из background следует выделить background-color Анонимный Итересно автор открывал страницу своего материала хотябы в Safari? NMitra Открыл-открыл ))) Добавьте префикры -moz- и -webkit- к таким свойствам как transition, background разбейте на background-color и background-image и всё будет нормально. Или воспользуетесь SCSS, тот автоматом делает тоже самое. Я не нашла причин почему мне нужно было усложнять код. FOMUVI Сложно пройти мимо и не поблагодарить. Спасибо! Классная выборка кнопок, а главное много и все разные. Есть с чего выбрать и заточить под себя. Класс! NMitra Благодарю, что не прошли мимо! Анонимный Не работают стили для оперы, подскажите, что нужно сделать? NMitra Какой пример вас заинтересовал? Сергей Полежака очень понравилась button4, но некоторые браузеры ее не показывают почему то Алексей Хорошая статья с помощью нее сделал нормальную кнопку Анонимный Норм та так, спасибо Анонимный все супер, но как выставить фиксированные размеры кнопки? а то автоматом подгоняет под текст, т.е. под количество написанных букв. NMitra Для ширины указать width и text-align: center; Убрать padding-left и padding-right, например, так: padding: 15px 0.

Цукерберг рекомендует:  YOLO Driven Development и другие методологии разработки

Для высоты сложнее. Можно указать одинаковую height и line-height, но line-height не поддерживается некоторыми мобильными браузерами, например, Opera Mini. Совсем убрать padding.

Можно добавить дополнительно :before http://shpargalkablog.ru/2012/04/vertical-align.html#inline-before (см. «Ура, оно») Максим Грачев Как изменит размер кнопки? NMitra padding — это отступ до границы border
width — ширина
height — высота
line-height должна быть равна height, чтобы выравнять текст по центру. См. http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html
font-size — размер шрифта NMitra Подбирайте значения под себя. В большинстве случаев достаточно изменить padding.
Одно значение: отступ от содержимого для каждого края.
Два значения: первое для вертикальных, второе — горизонтальных сторон.
Три значения для верхней/по бокам/нижней сторон.
Четыре значения: вверх/справа/низ/слева.
См. http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#p-m-storona Регина Спасибо! Очень круто! Серж Благодярю! огромный выбор классных кнопок! все стили подходят, можно выбрать для любого дизайна) Намного ускоряют верстку, отличная заготовка! Анонимный спасибо NMitra Пожалуйста, очень рада таким отзывам! Анонимный Хорошая статья! Подскажите, пожалуйста, как на анимированной кнопке button31 повернуть «стрелку» влево (она там направлена вниз). То, что нужно править второй блок я понял, в частности менять градусы и положения, но получается какая-то несуразица.
П. С. К верстке сайтов не имею никакого отношения, html и CSS знаю настолько, насколько мне необходимо — изредка сваять себе хтмл-файлик, как каталог файлов. Но вот на свою голову проблемы нашел — решил сделать себе сайтик и нужна кнопка возврата на предыдущую страницу, которая появляется при адаптации при открытии сайта с моб. устройств, а там стрелочка влево нужна. NMitra a.button31:after, a.button31:before <
content: «»;
position: absolute;
z-index: -1;
left: 0%;
top: -10%;
right: 0;
bottom: 0;
width: 30%;
height: 10%;
margin: auto;
background: #999;
box-shadow: 0 1px rgba(0,0,0,.1) inset, 0 1px #fff;
transform: rotate(-35deg);
>
a.button31:after <
top: 15%;
transform: rotate(-315deg);
> Дима a.button1 <
font-weight: 900;
color: white;
text-decoration: none;
padding: .8em 1em calc(.8em + 3px);
border-radius: 3px;
background:#4d6f91;
transition: 0.2s;
width:500;

Хочу чтобы кнопки были одной ширины а параметр width:500; нечего не изменяет NMitra display: inline-block;
width: 500px;
padding: .8em 0 calc(.8em + 3px);
text-align: center; Robomatic Спасибо больше, без воды, с примерами, кратко и по делу. NMitra Благодарю за отзыв! тотр спасибо, господи
NMitra :)) Max Огромное спасибо, сегодня пол дня пытался сделать подобную кнопку без плагина на wordpress, дома вечером с первого запроса в Google попал на Вашу страничку :) Наконец то закрою вопрос с кнопочками! СПАСИБО! NMitra Благодарю за отзыв! Анонимный Подскажите пожалуйста, как вставить такую кнопку на страницу в вордпресс? Если не сложно, то расскажите по-подробнее, так как я еще не очень хорошо разбираюсь в этом (Пытался несколькими способами, описанными в интернете, не получилось) NMitra Смотрите в поиске Яндекса/Google

если планируется кнопка на многих страницах — «как изменить шаблон wordpress». Для кнопки или ссылки в файле php добавляете класс, например, . А стили — в файл .css, например,
.button16

если для одной страницы, то должна быть кнопка для перехода в «HTML»-режим при написании/редактировании статьи. В нужное место добавляете и стили, и кнопку. Только в этом случае стили нужно вписывать обязательно внутри

Я, к сожалению, не изучала админку WP Владимир Левыкин Доброго времени суток ))) Сразу оговорюсь, я тока начинаю юзать joomla. Подскажите как правильно? и где нужно что прописать в шаблоне protostar что бы ваши код css применялся адекватно просто уже 3 день мыкаюсь не могу применить стиль. То шаблон разъезжается то кнопка везде где ненужно появляется )))) печаль беда )))). ( Я не волшебник, я тока учусь ) NMitra Владимир, доброе время суток. Не осерчайте, но вам сюда http://shpargalkablog.ru/p/comments-blog.html Эдуард Столько всего, я прям растерялся. Анонимный Поменяла кнопку на форуме php bb 3.0, а текст кнопки пропал, как его восстановить?
NMitra По-подробнее (пропал — стал прозрачным или был заменён на тот, что между тегами a?) или адрес страницы сайта Анонимный Пропал в прямом смысле слова, его совсем не видно, но кнопка работает.
NMitra Не, так не могу, адрес страницы сайта, пожалуйста Анонимный К сожалению сайт на локалке находиться, могу только код переслать, но здесь публиковать сайт не хочет. NMitra Добавьте на http://jsfiddle.net/ Анонимный Вот, готово https://jsfiddle.net/Ltuku5gn/ NMitra А где HTML? Анонимный классный сайт Анонимный А можно ваши кнопки сразу ставить на сайт или на форуме вставлять в ком? Они будут работать? (начинающий) Ирина Офигенно, спасибище. NMitra Начинающий, что вы имеете ввиду под «Будут работать»? Ваши кнопки изначально должны работать (перенаправлять куда-то посетителя, отправлять форму и т.п.), а это всего лишь украшение кнопок.

Ирина, благодарю за комментарий! Анонимный Понимаете, я в этих кодах не разбираюсь, но. кнопки очень понравились. сайтами не занимаюсь, но красиво подать ссылку на файл попробовал. тупо вставил код кнопки добавил адрес на файл и вроде работает! Пример: http://bogoglasnik.ru/load/88-1-0-1380?l_ZeHf (начинающий) Анонимный Добрый день. Подскажите пожалуйста, как сделать кнопку что бы она была ссылкой, вела на другую страницу? Где вписать ссылку
А так вроде со всем разобрался и с цветом и размером, а вот как сделать ее ссылкой что бы при нажатии переходить на другую страницу
Заранее благодарен. NMitra Заполните атрибут href (подробнее http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html )

кнопка Анонимный Спасибо большое! (начинающий) stobuxov Спасибо, облазил пол интернета, самая лучшая подборка и описание, спасибо. NMitra Благодарю, стараюсь обращать внимание на интересные варианты Анонимный Здравствуйте. Отличная статья. Только хотелось бы уточнить у автора поподробнее о том, как скорректировать код (например для — Вдавленная кнопка), чтобы работало в браузере Safari. Я пока не смог понять, как правильно разбить background на background-color и background-image. Может автор показать правильно скорректированный код? NMitra Здравствуйте, например,

background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114));

background-color: rgb(206, 220, 231);
background-image: linear-gradient(rgb(206,220,231), rgb(89,106,114)); Medoti Dorf Приветствую, спасибо за статью!
Подскажите, как сделать кнопку по всей ширине блока ?
a.knopka <
color: #fff; /* цвет текста */
text-decoration: none; /* убирать подчёркивание у ссылок */
user-select: none; /* убирать выделение текста */
background: rgb(212,75,56); /* фон кнопки */
padding: .7em 1.5em; /* отступ от текста */
outline: none; /* убирать контур в Mozilla */
>
a.knopka:hover < background: rgb(232,95,76); >/* при наведении курсора мышки */
a.knopka:active < background: rgb(152,15,0); >/* при нажатии */ NMitra Здравствуйте!

a.knopka <
display: block;
text-align: center;
> Medoti Dorf Спасибо! Анонимный Не знаю, когда я наткнулся на эту статью и добавил ее в немногочисленные закладки — года 2 назад. За это время воспользовался примерами раз 20-30 точно! Спасибо автору, и низкий ей поклон! Анонимный По поводу SAFARI — я все сделал, но кнопка все равно показывается некорректно.
Не могли бы вы написать полностью обновленный код в ответе для кнопки — button22, тогда все станет понятно.
Спасибо.
NMitra Комментарий 71: спасибо за отзыв, для меня он важен!
Комментарий 72: попробуйте так http://jsfiddle.net/NMitra/fyd1nzfk/ Анонимный добрый день! скажите пожалуйста можно ли чтобы кнопка уже была нажата и была не активной. допустим из этого примера:
кнопка «button17»
за ранее буду очень признателен! спасибо! NMitra Добрый день, вместо
a.button17:focus:not(:active) <>
напишите
a.button17 <>
Но обычно её делают более приглушённого цвета (плюс можно попробовать прозрачность http://shpargalkablog.ru/2013/02/opacity-css.html ). Анонимный Кто знает как делать, свяжитесь со мной по miheyzih@mail.ru Анонимный скопировал и вставил на свой сайт , кнопка не вышла, нужно что либо добавлять еще к этому коду?
Объясните как ребенку, т.к еще зелен в этих делах NMitra Посмотрите тут, пожалуйста, http://shpargalkablog.ru/p/comments-blog.html#html Анонимный Большое огромное спасибо автору блога. Андрей пивоварчик Привет, спасибо за кнопки. Но возникает небольшая проблема. В каждой из кнопок при наведении кроме подсветки и других эффектов всплывает какая-то красная линия. Как ее убрать подскажите плз. Сайт на wordpress , если это важно Андрей пивоварчик Заметил,что это происходит только на определенной теме wordpress NMitra Попробуйте для :hover дописать
outline: none; sawkow1 Спасибо Мастер, получилось красиво:
http://djk-tanzen.de/?mod=anmeld
Но на safari, к сожалению не работает. Unknown Отличный материал спасибо, но есть вопрос, возможно ли сделать например в кнопке button31, такой эффект, чтобы после нескольки секунд анимация заменялась на другую кнопку автоматически? NMitra Можно. Спасибо за идею! Но ваш вопрос требует несколько большего времени, чем я располагаю. Извините. http://shpargalkablog.ru/p/comments-blog.html Михаил Евсеев Лучшие! В закладки! Анонимный СПАСИБО ЗА ВАШ ТРУД. Анонимный Здравствуйте NMitra.Я новичок. Делаю сайт с помощью корсофтовского комплекса. Делать начал из «спортивного интереса». С текстами как то все сложилось а вот оформление хотелось бы улучшить. Задумал интерактивные кнопки. Воспользовался генераторами кнопок, потому как познания в НTML и CSS нулевые. Генератор выдал два кода НTML и CSS. Не могу объединить.Не хватает познаний. Буду признателен за помощь.Cпасибо.HTML: a href=’#’ >Talia Screen Orizzontale NMitra Здравствуйте, так в HTML добавляйте

Цукерберг рекомендует:  C# - Получение доступа к AppData C#

Анонимный спасибо за кнопки — выглядят супер . Анонимный Очень помогло в работе ибо начинающий.
Однако, как отцентровать текст относительно иконки, что стоит перед кнопкой
height:40px; (высота кнопки)
line-height:40px; (незнамо что, но если равно высоте кнопки, то текст выравнивается по высоте относительно иконки слева)
Узнал только прочитав форум, надо чтобы height=line-height

Вот сейчас опять перечитываю в поисках как убрать подчёркивание.

Очень не хватает просто подробного описания, какой параметр что значит.

Огромное спасибо Автору странички, без информации выше было бы очень тяжко.Спасибо. Анонимный Извиняюсь, но никак не получается создать кнопку например, высотой 24 пикселя с иконкой (24х24).
так чтобы текст на копке и иконка слева от текста были по середине кнопки. По горизонтали всё ок , Но то что иконка или текст постоянно съезжают куда то по вертикали, удручает.

Всякие комбинации служебных слов перепробовал, но понять так и не смог.

Может что подскажете. Заранее огромное Спасибо!

a.button_main_ico <
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#3895EA;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main_ico:hover <
background-color: #BABABA;
>
a.button_main_ico:focus <
background-color: #D8D8D8;
>
a.button_main_ico:focus:hover <
background-color: #DFDFDF;
>

a.button_main_ico:before <
content: url(../ico_L_ready.png);
> NMitra Вы иконку добавляете с помощью :before? Тогда текст нужно окружить span. :before и span задать vertical-align: middle;

a.button_main_ico:before,
a.button_main_ico span <
content: url(../ico_L_ready.png);
vertical-align: middle;
>

пример https://jsfiddle.net/NMitra/533605pm/
теория http://shpargalkablog.ru/2012/04/vertical-align.html Анонимный NMitra — спасибо огромное за внимание и заданное направление.
Иконка у меня 24х24, у вас в примере 16х16 и в итоге когда я подставляю своё то у меня всегда съезжает вниз текст. Иконка стоит правильно, текст начинается где-то с её середины.
Пока разбираюсь.

Спасибо за участие и заданное направление.


За отклик и направление Огромное Спасибо. NMitra Высота-то указана фиксированной height:24px; Анонимный Однако, нашёл ответ который мне подошёл.

в HTML
Кнопка с иконкой и текстом выравненные по середине кнопки:
Кнопка

Тоже но без иконки:
Кнопка

(слово «класс» — поменять на английское а то тут не печаталось)

В CSS
a.button_main <
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#550000;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main:hover <
background-color: #BA0000;
>
a.button_main:focus <
background-color: #D80000;
>
a.button_main:focus:hover,a.button_history:focus:hover <
background-color: #DF000;
>

.ico_name <
background-image: url(../ico_name.png);
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
background-position: 0px -1px;

Тут приятно, что класс кнопки, отвязан от класса иконки. Значит используем один класс на все кнопки приложения и лишь меняем классы иконок по надобности.

Спасибо вы натолкнули на верный путь, с уважением sharpionok Анонимный Вместо HTML кода напечаталась ссылка чёрти куда. Как показать код в HTML не понимаю.=(

Эффект блеска при нажатие на кнопку

В представленной кнопке, которая выполнена формате 3D присутствует красивый эффект частиц блеска, где при клике они появляются по сторонам. В этом материале представлен один из материалов, который отлично смотрится на темном фоне, а больше всего под него он строился, в плане эффекта.

Сама идея состоит в том, что по умолчанию или при открытии страницы мы видим стандартный вид кнопки, где можно увидеть элементы, которые исполнены в 3D.

Так как при просмотре этот эффект действительно выглядит интересным для функций кнопки. Ведь они основном идут для перехода на другую страницу или скачивание файла.

А здесь сопровождает красиво исполненный эффект, что можно задавать его размер, как он выстреливает, виде салюта. Плюс в том, что отлично привлекает, ведь если не нажимать на кнопку, то она качается как на волне, что изначально заметно.

Не думаю, что на официальный или игровой сайт можно такой трюк установить, просто он будет не понятен, здесь изначально специфически все смотрится.

Вдохновляющие стили и эффекты для кнопок

Дата публикации: 2015-05-05

От автора: Коллекция вдохновляющих стилей и эффектов для кнопок. Для большинства эффектов мы используем CSS переходы и псевдо-элементы. Сегодня мы хотели бы поделиться с вами свежими стилями и эффектами для кнопок.

Текущий, так называемый, «кнопочный тренд» действительно впечатляет, ведь у нас появились возможности для создания огромного количества разнообразных стилей. Теперь можно смело экспериментировать с линиями и шрифтами. На сайтах с фоновыми изображениями стали довольно популярными прозрачные кнопки со слегка скругленными углами. Но вас никто не ограничивает в степени скругления, выбор остается за вами, и вы можете создавать любые кнопки, которые вписываются в ваш дизайн. Но у всех современных кнопок есть общие черты – это простота и ненавязчивость эффектов. Мы постарались создать сбалансированный набор стилей и эффектов для кнопок, в котором не используется чересчур много анимации. Наоборот, мы постарались добавить осознанности каждому эффекту, чтобы он сочетался с цветами и формами самих кнопок. Некоторые из стилей более смелые – они могут подойти для некоторых особых дизайнов.

Мы решили, что все эффекты будут единообразно срабатывать при наведении. Для некоторых эффектов могло бы подойти срабатывание при клике, но выбор остается за вами, и вы можете сами решать, как использовать полученные идеи.

Пожалуйста, обратите внимание на то, что некоторые используемые техники поддерживаются только современными браузерами. (Мобильная версия) Safari очень слабо поддерживает данные эффекты.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

В большинстве случаев мы используем CSS переходы, но есть также несколько примеров с CSS анимациями. На этот раз мы использовали своего рода модульный подход, при котором мы сначала прописываем определенные свойства, например, border-radius, font-size, border и т.д. для отдельных классов, чтобы упростить процесс создания определенной кнопки. Если вы захотите использовать единый стиль, тогда мы рекомендуем вам объединить стили в один набор правил.

Примеры. Стили кнопок CSS

Предлагаю вашему вниманию неплохую подборку стилей кнопок CSS. Самые различные виды дизайна, оформления весьма станут по вкусу многим. Подборку можно расценивать как для вдохновения или же использовать по прямому назначению. Чтобы создать кнопку CSS достаточно базовых знаний, а при использовании специальных сервисов «Генератор кнопок CSS», то и знаний много не нужно. Есть также и программы в которых можно создавать кнопки CSS «Программы для создания меню CSS». Хоть программы и предназначены для меню, но в них есть возможность создавать отдельные кнопки CSS.

Кнопка, которая при нажатии оставалась «нажатой»

11.07.2020, 11:26

Необходимо, чтобы при нажатии на кнопку «Регистрация» Выводилось сообщение: «Точно отправить форму?».
Возник вопрос, у меня есть форма, в которой необходимо заполнить поля и в ней происходит проверка.

При нажатии на кнопку «Всем привет» вывести сообщение `alert(«привет»)` кнопку удалить и добавить новую кнопку.
как сделать чтобы при нажатие на кнопку всем привет выводилось сообщение alert(«привет») кнопка.

При нажатии на кнопку «Сбросить » не запускается функция clear()
При нажатии на кнопку «Сбросить » не запускается функция clear() .

Плавное движение блока «А» вправо при нажатии на блок «Б». Реализация на чистом JS
Здравствуйте. Собственно все что необходимо указано в заголовке. Есть блок, который абсолютно.

Effects for buttons

Более 15 различных эффектов для кнопок Вашего чата

В наше время анимация кнопок как нельзя актуальна, так как современные интерфейсы требуют высокой степени интерактивности и простоты, чего как раз и можно достичь с помощью грамотной CSS-анимации. Каждому администратору хочется сделать свой чат уникальным, придумать отличный дизайн, эффекты при наведении, плавающие панели, шрифты и многое другое. И кнопки не исключение! Здесь представлены несколько примеров анимации для ваших кнопок в состоянии покоя, при наведении и нажатии.

В чате присутствуют три основных кнопки: две кнопки «Войти в чат» и одна кнопка отправки сообщений.


Каждой кнопке присвоен свой класс и ID:

  • #join-chat-button — кнопка входа внизу чата
  • #join-chat-button2 — кнопка войти в чат на странице входа
  • .chatSendButton — кнопка отправки сообщений

На самом деле, кнопками можно сделать любую ссылку или элемент, на который вы щелкаете, наводите мышку или пальцы, для вызова меню, просмотра профиля и т.д.

Цукерберг рекомендует:  Вакансии Leo Burnett

Основные события кнопок

И так, первое с чего стоит начать, это выбрать кнопки, которые вы хотите анимировать при наведении или нажатии. Давайте возьмем две кнопки входа и добавим к ним анимацию при наведении:

Смотрите, мы с вами выбрали swing — это тот элемент, к которому цепляется наша анимация.

В результате у нас получается кнопка №1

Далее мы мы по аналогии выбираем class или id кнопок, которые хотим анимировать и выбираем эффекты:

CSS Buttons

Узнайте, как стиль кнопок с помощью CSS.

Основные стили кнопок

Кнопка по умолчанию Кнопка CSS

Пример

Цвета кнопок

Используйте свойство background-color для изменения цвета фона кнопки:

Пример

Размеры кнопок

Используйте свойство font-size для изменения размера шрифта кнопки:

Пример

Используйте свойство padding для изменения заполнения кнопки:

10px 24px 12px 28px 14px 40px 32px 16px 16px

Пример

Закругленные кнопки

Используйте свойство border-radius для добавления скругленных углов к кнопке:

Пример

Цветные границы кнопок

Используйте свойство border , чтобы добавить цветную рамку к кнопке:

Пример

Используйте селектор :hover для изменения стиля кнопки при наведении на нее указателя мыши.

Совет: Используйте свойство transition-duration для определения скорости эффекта «Hover»:

Пример

.button <
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
>

.button:hover <
background-color: #4CAF50; /* Green */
color: white;
>
.


Кнопки теней

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 для группирования кнопок ниже друг друга, вместо того, чтобы бок о бок:

Как делается такой эффект для кнопки?

Кнопка Submit на этом сайте имеет прикольный эффект при нажатии , хотелось би узнать как ето делать

Готовые решения не интересуют, мне интересно как это сделать самому с помощью CSS и jQuery

  • Вопрос задан более трёх лет назад
  • 632 просмотра

Готовые решения не интересуют, мне интересно как это сделать самому с помощью CSS и jQuery

Такой эффект подпадает под стиль material design.

Стилизуем кнопки правильно

Если вы создаёте сайт или веб-приложение, там наверняка есть кнопки. А может быть ссылки, выглядящие как кнопки? В любом случае важно правильно их сделать.

В этой статье мы создадим основные стили для тегов и , а также собственный CSS-компонент .btn. Для каждого этапа вы найдёте демо-страницу.

Этап 1: Сброс стилей у .
Этап 2: Создание CSS-компонента «button».
Этап 3: Стилизация активного, ховер- и фокус-состояния.
Этап 4: Разбираемся с прилипшим фокусом.

Сброс стилей у

Как правило, 99,99% кликабельных элементов на сайте или в приложении должны быть или . Что делать, если вы не уверены, какой элемент использовать в определённых ситуациях:


1. Если при клике открывается другая страница или изменяется большая часть контента на странице — используйте ссылку ( …).
2. В остальных случаях используйте обычную кнопку ( … ).

Использование правильного элемента имеет ряд преимуществ: это благоприятно для SEO (особенно для ссылок!), хорошо для навигации с клавиатуры и улучшает доступность для всех пользователей.

Несмотря на это, разработчики редко используют . По всему интернету можно встретить кучу кнопок, которые вызывают действия через JavaScript, но на деле оказывается, что это

Почему же так редко используется?

  • Знание: многие разработчики просто не знают о нём (выучить более 100 HTML-элементов не так-то просто).
  • Стилизация: по умолчанию у сложные стили, из-за которых трудно добиться собственного вида.

К счастью, стилизацию поправить не так уж сложно!

В итоге мы получаем кнопки, которые выглядят как обычный текст.

Минус в том, что при таком подходе необходимо стилизовать все кнопки, или пользователь не распознает их (см.: возможности). Ещё один вариант — использовать этот стиль как миксин (Sass или другой препроцессор) и применять его выборочно:

Создание CSS-компонента «button»

Теперь, когда мы сбросили дефолтные стили, можем приступить к написанию своих. Вот что мы сделаем:

  • «кнопочный» стиль, который можно применять и к ссылкам и кнопкам;
  • применять мы хотим выборочно, потому что у нас есть другие ссылки и кнопки с разными стилями на странице.

Напрашивается CSS-компонент. CSS-компонент — это стиль или набор стилей, которые применяются, используя классы, к различным типам HTML-элементов. Вам должно быть знакомо это понятие, если вы используете CSS-фреймворки Bootstrap или Foundation.

Назовём этот компонент .btn (как в Bootstrap, но мы ограничимся одним цветом и размером, чтобы было проще).

Вот что у нас получилось:

Вам, возможно, интересно, почему контраст так важен. Ведь кнопки на второй строке выглядят красиво: кому не нравятся пастельные цвета?

Проще говоря: с хорошим контрастом, вы охватите больше пользователей. Некоторые пользователи — слабовидящие. Другие могут просматривать ваш сайт с телефона, на ходу, а под дневным светом труднее читать. Вы можете проверить коэффициент контрастности и почитать о контрастности текста.

Стилизация активного, ховер- и фокус-состояния

Круто, когда ваша кнопка выглядит красиво, но… пользователи будут взаимодействовать с ней, и поэтому требуется визуальный отклик, когда состояние кнопки изменяется.

У браузеров свои стили по-умолчанию для «активного» (т.е. нажатого) и «фокусного» состояния, но, сбросив стили у кнопки, мы избавились от некоторых из них. Не хватает ещё стилей при наведении мышкой, да и в целом хочется, чтобы все стили были видны и соответствовали нашему дизайну.

Начнём со стилей для состояния :active, которое срабатывает при клике кнопки или ссылки:

Мы могли бы изменять цвет кнопки, но я хочу использовать этот эффект при наведении:

Давайте добавим теперь и фокусные стили. Пользователи вашего сайта или веб-приложения могут использовать обычную или виртуальную клавиатуру (на iOS и Android), чтобы «сфокусировать» и активировать поле в форме, кнопки, ссылки и другие интерактивные элементы.

  • Для некоторых пользователей это ускоряет заполнение форм.
  • Для других использование мышки или тач-указателя невозможно или затруднительно. Они пользуются клавиатурой или специальным устройством.

Во многих веб-проектах, которые я видел, дизайнеры задают стили только для наведения мышки, но не для фокуса. Что же нам делать? Простое решение — использовать :hover стили для :focus.

И когда у нас будут стили для фокуса (только не до!), мы можем сбросить браузерные стили для кнопки:

Попробуйте сами: если вы за компьютером, используйте Tab и Shift+Tab для навигации между кнопками:

Разбираемся с прилипшим фокусом

Есть небольшой недочёт. В некоторых браузерах, если кликнуть по ссылке или кнопке, применяются два псевдокласса:

«Активный» псевдокласс убирается сразу после того, как отпускается кнопка мыши или трекпада после нажатия. Но в некоторых браузерах после этого остаётся :focus стиль, пока пользователь не кликнет где-нибудь на странице.

В моих тестах, такое происходит в Chrome (66), Edge (16), и Firefox (60, только для ссылок). Safari (11.1), кажется, поумнее, и там нет такой проблемы.

Мы можем исправить это, используя новый псевдокласс :focus-visible (черновик спецификации). Этот элемент ещё не полностью проработан, но идея в том, что браузеры должны применять состояние :focus-visible только при взаимодействии с клавиатуры или подобных устройств, а не при клике.

Так как :focus-visible ещё не внедрён в браузеры, нам придётся использовать решение на JavaScript, такой как этот полифилл. Он действует по всей странице и добавляет класс focus-visible только элементам, которые получают фокус при использовании клавиатуры.

Давайте изменим стили, чтобы отделить стили :hover от стилей :focus.

Теперь, после того как мы подключили к странице focus-visible.js, он будет добавлять класс js-focus-visible элементу . Мы можем использовать это, чтобы убрать стили фокуса с элементов, которые не имеют класс focus-visible:

Более простой способ — определить фокусные стили только для класса focus-visible, но если полифилл неактивен (например, если JS не смог загрузится), то стили не применятся.

Привет, меня зовут Нуриль , я верстаю сайты, перевожу, изучаю доступность и веду канал в телеграмме « тесные киски ». Я есть в твиттере (@baradusov) и в телеграмме (@baradusov).

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих