Анимированные кнопки для html

Анимация кнопок при наведении

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

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

Использование transition

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

Так, если понадобится задать разное время перехода для цвета фона и рамки, пишем следующее, разделяя параметры запятой:

transition: background-color 1s, border-color 0.5s;

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

Если требуется сделать задержку перед началом изменения, то добавляем в конец ещё время:

transition: background-color 1s 0.5s;

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

Рассмотрим добавление к кнопке рамки, сделанной через box-shadow. Да, это свойство добавляет тень, но вполне универсально, чтобы применяться, в том числе, и для формирования рамок у кнопок. Здесь используется две тени, одна поверх другой, что, в итоге, даёт зелёную рамку на некотором удалении от кнопки.

box-shadow: 0 0 0 2px #fff, /* Белая тень */ 0 0 0 4px #3f8a7c; /* Зелёная тень */

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

transition: background-color 0.4s, box-shadow 0.2s 0.3s;

Окончательный код показан в примере 1.

Пример 1. Использование transition

Использование animation

Свойство transition имеет своё определённую роль и с его помощью нельзя сделать сложную анимацию элемента. Для этой цели предназначено свойство animation, работающее совместно с правилом @keyframes.

Сперва нашей анимации следует дать уникальное имя, пусть будет flip :

Теперь определяемся с ключевыми кадрами, которые задаются в процентах. Например, для вращения элемента нам понадобится два положения:

Конечное значение 100% в данном случае можно не указывать, поскольку оно совпадает с начальным.

Для вращения элемента используем свойство transform с функцией rotateX().

Теперь эту анимацию можно привязать к кнопке, добавив свойство animation к псевдоклассу :hover .

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

animation: flip 1s 3; /* Повторяем три раза */

Или сделать анимацию бесконечной с помощью ключевого слова infinite .

animation: flip 1s infinite; /* Бесконечная анимация */

В примере 2 при наведении курсора мыши на кнопку она поворачивается один раз вокруг горизонтальной оси.

Пример 2. Использование @keyframes

Использование сторонних библиотек

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

Ниже рассмотрим пару популярных библиотек.

Animate.css

Эту библиотеку можно установить через npm, Yarn или добавить напрямую через CDN:

После чего на сайте выбираем понравившуюся анимацию и вставляем её имя в свойство animation . Обязательно следует добавить и продолжительность самой анимации:

В примере 3 при наведении курсора на заблокированную кнопку она трясётся по горизонтали. Для анимации не всех кнопок, а только с атрибутом disabled , используем комбинацию псевдоклассов :disabled:hover .

Пример 3. Использование библиотеки Animate.css

Hover.css

Эта библиотека содержит набор разных эффектов с анимацией, иконками, тенями, уголками и рамками. Сама библиотека устанавливается через npm, Bower или скачивается напрямую с сайта GitHub. После этого подключается как обычный CSS-файл:

Эффекты для элемента работают путём добавления соответствующего класса к элементу. Все классы Hover.css начинаются с префикса hvr-, после чего идёт имя эффекта. К примеру, для создания пульсирующей кнопки при наведении, указываем класс hvr-pulse :

В примере 4 при наведении курсора мыши на кнопку она поднимается вверх и под кнопкой добавляется тень.

Пример 4. Использование библиотеки Hover.css

Итого

• Для плавного изменения значений стилевых свойств при наведении на кнопку курсора мыши используется свойство transition.
• Сложная анимация делается с помощью ключевых кадров через правило @keyframes.
• Сама анимация применяется к кнопке через псевдокласс :hover и свойство animation.
• Готовые стилевые библиотеки для анимации позволяют упростить создание эффектов для кнопок.

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

Создайте кнопку, чтобы при наведении на неё курсора мыши вокруг кнопки плавно появлялся контур (рис. 1).

Создайте кнопку, чтобы при наведении на неё курсора мыши внутри кнопки плавно появлялась рамка (рис. 1).

См. также

• :focus на мобильных устройствах
• animation
• box-shadow
• transition
• Анимация
• Анимация в CSS
• Анимация ссылок при наведении
• Всплывающая подсказка
• Добавление тени
• Добавление треугольника
• Оформление кнопок
• Переходы
• Переходы и анимация
• Переходы с помощью :hover
• Работа с типографикой
• Сочетание с псевдоклассами
• Трансформация в CSS

Рецепты

Источник

Создаем анимированные кнопки при помощи CSS3

В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.

В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.

Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.

Обратите внимание, что анимация/переходы будут работать только в браузерах, которые поддерживают эти CSS3-свойства.

Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.

Пример 1

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

HTML-разметка

CSS

В стилях мы убедимся что переходы установлены правильно для элемента, который мы хотим анимировать при наведении. Цена будет невидимой, установим её прозрачность на 0. Применение множества box-shadow позволит нам создавать реалистичные эффекты:

.a-btn < background: linear-gradient(top, #a9db80 0%,#96c56f 100%); padding-left: 90px; padding-right: 105px; height: 90px; display: inline-block; position: relative; border: 1px solid #80ab5d; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); border-radius: 4px; float: left; clear: both; margin: 10px 0px; overflow: hidden; transition: box-shadow 0.3s ease-in-out; >.a-btn img < position: absolute; left: 15px; top: 13px; border: none; transition: all 0.3s ease-in-out; >.a-btn .a-btn-slide-text < position: absolute; font-size: 36px; top: 18px; left: 18px; color: #6d954e; opacity: 0; text-shadow: 0px 1px 1px rgba(255,255,255,0.4); transition: opacity 0.2s ease-in-out; >.a-btn-text < padding-top: 13px; display: block; font-size: 30px; text-shadow: 0px -1px 1px #80ab5d; >.a-btn-text small < display: block; font-size: 11px; letter-spacing: 1px; >.a-btn-icon-right < position: absolute; right: 0px; top: 0px; height: 100%; width: 80px; border-left: 1px solid #80ab5d; box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; >.a-btn-icon-right span < width: 38px; height: 38px; opacity: 0.7; border-radius: 20px; position: absolute; left: 50%; top: 50%; margin: -20px 0px 0px -20px; border: 1px solid rgba(0,0,0,0.5); background: #4e5c50 url(../images/arrow_down.png) no-repeat center center; box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5); transition: all 0.3s ease-in-out; >

.a-btn:hover < box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); >.a-btn:hover img < transform: scale(10); opacity: 0; >.a-btn:hover .a-btn-slide-text, .a-btn:hover .a-btn-icon-right span

.a-btn:active < position:relative; top:1px; background:#80ab5d; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color: #a9db80; >.a-btn:active .a-btn-icon-right span

Пример 2

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

HTML-разметка

Разметка на этом примере будет такой же, как и в первом примере.

CSS

Стили почти такие же, как и в первом примере, мы просто адаптируем цвета. Но мы сделаем другой эффект при наведении. Цена увеличится до исходного размера и иконка исчезнет. Для стрелки изменим цвет фона на красный:

.a-btn:hover < box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); >.a-btn:hover img < opacity: 0; >.a-btn:hover .a-btn-slide-text < opacity: 1; transform: scale(1); >.a-btn:hover .a-btn-icon-right span

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

.a-btn:active < position: relative; top: 1px; background: #5d81ab; box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset; border-color: #80a9da; >.a-btn:active .a-btn-icon-right span

Пример 3

В этом примере мы попытаемся сделать что-то совершенно другое. Кнопка будет расширяться вниз при наведении и раскрывать еще одно сообщение. Значок стрелки будет слегка вращаться.

HTML-разметка

Разметка в примере 3, будет несколько иной, чем в предыдущих примерах. Текст, который будет скользить вниз, будет в теге span с классом «a-btn-slide-text»:

CSS

В нормальном состоянии кнопка будет иметь определенную высоту, мы будем анимировать её при наведении с целью вывода дополнительных сообщений. Дополнительное сообщение «a-btn-slide-text» будет позиционироваться абсолютно и мы будем увеличивать его высоту от 0 до 30 пикселей при наведении.

.a-btn < background: linear-gradient(top, #feda71 0%,#febb4a 100%); border: 1px solid #f5b74e; border-color: #f5b74e #e5a73e #d6982f; box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395; padding: 0px 80px 0px 10px; height: 38px; display: inline-block; position: relative; border-radius: 4px; float: left; margin: 10px; overflow: hidden; transition: all 0.3s linear; >.a-btn-text < padding-top: 5px; display: block; font-size: 18px; white-space: nowrap; color: #996633; text-shadow: 0 1px 0 #fedd9b; transition: all 0.3s linear; >.a-btn-slide-text < position:absolute; top: 35px; left: 0px; width: auto; right: 52px; height: 0px; background: #fff; color: #996633; font-size: 13px; white-space: nowrap; font-family: Georgia, serif; font-style: italic; text-indent: 15px; overflow: hidden; line-height: 30px; box-shadow: -1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset; transition: height 0.3s linear; >.a-btn-icon-right < position: absolute; right: 0px; top: 0px; height: 100%; width: 52px; border-left: 1px solid #f5b74e; box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; >.a-btn-icon-right span < width: 38px; height: 38px; opacity: 0.7; position: absolute; left: 50%; top: 50%; margin: -20px 0px 0px -20px; background: transparent url(../images/arrow_right.png) no-repeat 50% 55%; transition: all 0.3s linear; >

При наведении мы будем менять высоту кнопки и дополнительный текст. Мы также будем вращать значок стрелки на 45 градусов:

.a-btn:hover < height: 65px; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); >.a-btn:hover .a-btn-text < text-shadow: 0px 1px 1px rgba(0,0,0,0.2); color: #fff; >.a-btn:hover .a-btn-slide-text < height: 30px; >.a-btn:hover .a-btn-icon-right span

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

Пример 4

В примере 4, мы будем выдвигать дополнительное сообщение, как и в предыдущем примере, но мы сделаем это теперь с правой стороны. Это будет выглядеть как будто кнопка открывает сообщение внутри себя.

HTML-разметка

Разметка в этом примере такая же, как и в предыдущем.

CSS

Стили кнопки будут похожи на предыдущий пример. Мы только изменим цвет и положение дополнительного текста:

.a-btn < background: linear-gradient(top, #80a9da 0%,#6f97c5 100%); padding-left: 20px; padding-right: 80px; height: 38px; display: inline-block; position: relative; border: 1px solid #5d81ab; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); border-radius: 20px; float: left; clear: both; margin: 10px 0px; overflow: hidden; transition: all 0.3s linear; >.a-btn-text < padding-top: 5px; display: block; font-size: 18px; white-space: nowrap; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); color: #446388; transition: all 0.2s linear; >.a-btn-slide-text < position:absolute; height: 100%; top: 0px; right: 52px; width: 0px; background: #63707e; text-shadow: 0px -1px 1px #363f49; color: #fff; font-size: 18px; white-space: nowrap; text-transform: uppercase; text-align: left; text-indent: 10px; overflow: hidden; line-height: 38px; box-shadow: -1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; transition: width 0.3s linear; >.a-btn-icon-right < position: absolute; right: 0px; top: 0px; height: 100%; width: 52px; border-left: 1px solid #5d81ab; box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; >.a-btn-icon-right span < width: 38px; height: 38px; opacity: 0.7; position: absolute; left: 50%; top: 50%; margin: -20px 0px 0px -20px; background: transparent url(../images/arrow_right.png) no-repeat 50% 55%; transition: all 0.3s linear; >

При наведении мы увеличим справа padding кнопки, а также ширину тега span с классом «a-btn-slide-text»:

.a-btn:hover < padding-right: 180px; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); >.a-btn:hover .a-btn-text < text-shadow: 0px 1px 1px #5d81ab; color: #fff; >.a-btn:hover .a-btn-slide-text < width: 100px; >.a-btn:hover .a-btn-icon-right span

Пример 5

В этом примере мы будем использовать символьный шрифт для иконок. Идея заключается в создании следующего эффекта: при наведении мыши иконка исчезает и появляется движущаяся стрелка.

HTML-разметка

Структура будет состоять из 4 тегов span внутри ссылки. Span с классом «a-btn-slide-icon» будет анимировать стрелку, она будет двигаться сверху вниз.

CSS

Поскольку мы будем использовать шрифт для отображения иконки с левой стороны, мы должны будем подключить этот шрифт.
Мы будем скрывать стрелку, установив её значение top равным -30px.

@font-face < font-family: 'WebSymbolsRegular'; src: url('websymbols/websymbols-regular-webfont.eot'); src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('websymbols/websymbols-regular-webfont.woff') format('woff'), url('websymbols/websymbols-regular-webfont.ttf') format('truetype'), url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); font-weight: normal; font-style: normal; >.a-btn < border-radius: 50px; padding: 10px 30px 10px 70px; position: relative; float:left; display: block; overflow: hidden; margin: 10px; background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 74%,rgba(237,237,237,1) 100%); box-shadow: 0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); transition: box-shadow 0.3s ease-in-out; >.a-btn-symbol < font-family: 'WebSymbolsRegular', cursive; color: #555; font-size: 20px; text-shadow: 1px 1px 2px rgba(255,255,255,0.5); position:absolute; left: 20px; line-height: 32px; transition: opacity 0.3s ease-in-out; >.a-btn-text < font-size: 20px; color: #d7565b; line-height: 16px; font-weight: bold; font-family: "Myriad Pro", "Trebuchet MS", sans-serif; text-shadow: 1px 1px 2px rgba(255,255,255,0.5); display: block; >.a-btn-slide-text < font-family: Arial, sans-serif; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #555; text-shadow: 0px 1px 1px rgba(255,255,255,0.9); >.a-btn-slide-icon < position:absolute; top:-30px; width: 22px; height: 22px; background: transparent url(../images/arrow_down_black.png) no-repeat top left; left:20px; opacity: 0.4; >

.a-btn:hover < background: #fff; box-shadow: 0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); >.a-btn:hover .a-btn-symbol < opacity: 0; >.a-btn:hover .a-btn-slide-icon

.a-btn:active < background: #d7565b; box-shadow: 0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1); >.a-btn:active .a-btn-text < color: #fff; text-shadow: 0px 1px 1px rgba(0,0,0,0.3); >.a-btn:active .a-btn-slide-text

Пример 6

В этом примере мы создадим круглую кнопку со звездочкой в ней. Мы заставим звезду вращаться при наведении курсора (с небольшим импульсом) и сделаем появление дополнительного текста.

HTML-разметка

У нас будет три тега span в нашей кнопке-ссылке. В последнем будет скрытый текст, который показывается при наведении.

CSS

Мы поиграемся немного с nth-child в этом примере. Так как у нас есть 3 тега span, мы будем обращаться к ним так: .a-btn span:nth-child(1), .a-btn span:nth-child(2) and .a-btn span:nth-child(3).

Мы сделаем кнопки круглыми и добавим необычные тени к ним. Для того, чтобы отцентрировать основной текст по вертикали, мы установим display равным table-cell. Звезды и скрытый текст будет позиционироваться абсолютно.

.a-btn < width: 120px; height: 120px; border-radius: 50%; display: block; margin: 20px; float: left; background: #f0ad4e; position: relative; box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff; transition: all 0.3s linear; >.a-btn span < display: table-cell; width: 80px; height: 80px; padding: 20px; text-align: center; vertical-align: middle; font-size: 26px; color: #fff; text-shadow: 0px 1px 1px #A03F16; font-family: "Arvo", "Myriad Pro", "Trebuchet MS", sans-serif; transition: all 0.3s linear; >.a-btn span:nth-child(1), .a-btn span:nth-child(3) < position: absolute; top: 0px; left: 0px; font-size: 40px; line-height: 36px; opacity: 0; >.a-btn span:nth-child(1) < background: transparent url(../images/star.png) no-repeat center center; opacity: 0.2; >

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

.a-btn:hover < background: rgba(170, 77, 27, 0.6); box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff; >.a-btn:hover span:nth-child(3) < opacity: 1; >.a-btn:hover span:nth-child(2) < transform: scale(0); opacity: 0; >.a-btn:hover span:nth-child(1)

.a-btn:active < box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff; >.a-btn:active span:nth-child(2)

@-webkit-keyframes rotate < 0% < transform: scale(1) rotate(0);>50% < transform: scale(0.5) rotate(180deg);>100% < transform: scale(1) rotate(360deg);>> 

Пример 7

В последнем примере мы создадим псевдо 3D-кнопку, использовав некоторые классные тени.

HTML-разметка

Структура будет такая же как и в пятом примере

CSS

.a-btn < border-radius: 10px; padding: 10px 30px 10px 70px; position: relative; float:left; display: block; overflow: hidden; margin: 10px; background: linear-gradient(top, #b7f2f4 0%,#7ce7ea 100%); border: 1px solid #90c6c8; border-color: #90c6c8 #78bdc0 #65b6ba; box-shadow: 0px -5px 0px 0px #458a8c, 0 1px 1px #d5d5d5, 0 1px 0 rgba(255,255,255,0.8) inset; transition: all 0.2s linear; >.a-btn-symbol < font-family: 'WebSymbolsRegular', cursive; color: #437b7d; text-shadow: 0 1px 0 #bef3f5; font-size: 20px; position:absolute; left: 20px; width: 20px; text-align: center; line-height: 32px; transition: all 0.3s ease-in-out; >.a-btn-text < font-size: 20px; color: #437b7d; text-shadow: 0 1px 0 #bef3f5; line-height: 16px; font-weight: bold; font-family: "Myriad Pro", "Trebuchet MS", sans-serif; display: block; >.a-btn-slide-text

.a-btn:hover < transform: scale(1.05); >.a-btn:hover .a-btn-symbol

Вот и всё! Надеюсь, вам понравилось создание некоторых крэйзи-кнопок при помощи CSS3 и вы получили вдохновение для своих экспериментов!

P.S. Предыдущие статьи посвященные CSS3-анимации Вы можете увидеть тут и тут.

Источник