Как сделать анимированную кнопку в html
Как сделать анимированную кнопку в html
Как сделать анимированную кнопку в html
Если вы решили придать своему сайту немного больше оригинальности, так, чтоб смотрелся сайт изящно, вам наверняка захочется исследовать и использовать анимированные кнопки, что выполнены на чистой стилистике CSS3. Эти фрагменты кода добавляют уникальности вашему ресурсу или блогу, что безусловно оценят большинство посетителей сайта. Кроме того, их можно использовать для придания ощущения динамики и дальнейшей помощи в укреплении вашего бренда.
Ниже приведен список из 20 различных анимированных кнопок CSS, которые вы можете добавить на свой сайт с помощью довольно простого CSS.
Стильные анимированные кнопки CSS для сайта
h1 <
color: #f1c40f;
font-size: 4rem;
text-transform: uppercase;
display: block;
width: 100%;
text-align: center;
>
@media screen and (max-width: 600px) <
h1 <
font-size: 3rem;
>
>
p <
color: #f1c40f;
font-size: 1.2rem;
width: 100%;
padding: 20px;
text-align: center;
>
.first <
-webkit-transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
>
.first:hover <
box-shadow: 0 0 40px 40px #e74c3c inset;
>
.third <
border-color: #3498db;
color: #fff;
box-shadow: 0 0 40px 40px #3498db inset, 0 0 0 0 #3498db;
-webkit-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
>
.third:hover <
box-shadow: 0 0 10px 0 #3498db inset, 0 0 10px 4px #3498db;
>
Вы можете добавить интерактивность на свой сайт, не будучи опытным разработчиком. И эта коллекция CSS анимированных кнопок позволяет легко добавить что-то дополнительное в дизайн вашего сайта. Хотите ли вы сделать призыв к действию или сделать навигацию более увлекательной, а также попробуйте эти кнопки при просмотре по работе, что лучше всего подходит для вашего сайта.
Кнопка с анимацией для сайта на CSS
Дополнительное видео
В данном уроке реализуем простой вариант анимированной кнопки на CSS. Задействуем в уроке псевдоэлементы ::before и ::after, для анимированного появления используем transition, а при помощи position и overflow, от центруем кнопку и скроем все лишнее за ее пределами.
See the Pen QOZGbj by Denis (@Dwstroy) on CodePen.
Создаем кнопка с анимацией для сайта
На этом с index файлом работа заканчивается, и переходим в файл стилей.
Оформляем ссылку под стиль кнопки
Первым делом выравниваем ссылку посередине экрана.
Вторым этапом, оформим ссылку под вид кнопки.
Делаем об водку в три пикселя, шрифт побольше, задаем цвет, уберем подчеркивание, делаем все буквы заглавными, делаем ширину и высоту, но так как ссылка сейчас встроенный элемент, присваиваем ей ( display: block; ) тем самым сделали ее блочным.
Создаем и анимируем псевдоэлементы
Выравниваем его по левому краю, а так как это блик, сделаем его немного прозрачней.
Cразу анимируем его при наведении, а потом по такой же схеме сделаем второй псевдоэелемент.
Для анимации, нам нужно текущий псевдоэлемент передвинуть в нулевое положение, то есть, что бы он занял область кнопки.
Обращаемся к кнопке при помощи псевдокласса, и указываем у нее отступы слева в ноль.
Для ::after отдельный делаем стиль, где убираем прозрачность.
И добавляем псевдоэлемент при наведении.
Так, и в принципе остается добавить ( overflow: hidden; ), что бы скрыть все за пределами кнопки и мы получили такую простенькую анимацию.
Попробуйте поиграться с настройками, с позиционируйте элементы по разным краям и сводите их при наведении, а результатом обязательно делитесь в комментариях.
Создаем анимированные кнопки при помощи CSS3
В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.
В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.
Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.
Обратите внимание, что анимация/переходы будут работать только в браузерах, которые поддерживают эти CSS3-свойства.
Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.
Пример 1
В этом примере мы создадим большую кнопку с несколькими элементами на ней. Она будет иметь иконку, основной текст, стрелку с правой стороны и цену, которая будет появляться только когда мы наводим курсор.
HTML-разметка
Структура довольно проста: иконка изображения и другие элементы в тегах span:
В стилях мы убедимся что переходы установлены правильно для элемента, который мы хотим анимировать при наведении. Цена будет невидимой, установим её прозрачность на 0. Применение множества box-shadow позволит нам создавать реалистичные эффекты:
При наведении мыши на кнопку мы будем менять тень, а также покажем цену и спрячем изображение:
В активном состоянии сделаем кнопку нажатой добавив тень. Значок стрелки справа будет увеличен:
Пример 2
Второй пример будет очень похож на первый, только мы добавим несколько новых эффектов.
HTML-разметка
Разметка на этом примере будет такой же, как и в первом примере.
Стили почти такие же, как и в первом примере, мы просто адаптируем цвета. Но мы сделаем другой эффект при наведении. Цена увеличится до исходного размера и иконка исчезнет. Для стрелки изменим цвет фона на красный:
Активное состояние будет таким же, как и в предыдущем примере. Мы будем только изменять цвета. Когда мы нажимаем кнопку, мы будем также поворачивать стрелку:
Пример 3
В этом примере мы попытаемся сделать что-то совершенно другое. Кнопка будет расширяться вниз при наведении и раскрывать еще одно сообщение. Значок стрелки будет слегка вращаться.
HTML-разметка
Разметка в примере 3, будет несколько иной, чем в предыдущих примерах. Текст, который будет скользить вниз, будет в теге span с классом «a-btn-slide-text»:
В нормальном состоянии кнопка будет иметь определенную высоту, мы будем анимировать её при наведении с целью вывода дополнительных сообщений. Дополнительное сообщение «a-btn-slide-text» будет позиционироваться абсолютно и мы будем увеличивать его высоту от 0 до 30 пикселей при наведении.
При наведении мы будем менять высоту кнопки и дополнительный текст. Мы также будем вращать значок стрелки на 45 градусов:
В активном состоянии кнопка будет немного двигаться и изменять цвет, так что кнопка будет казаться нажатой:
Пример 4
В примере 4, мы будем выдвигать дополнительное сообщение, как и в предыдущем примере, но мы сделаем это теперь с правой стороны. Это будет выглядеть как будто кнопка открывает сообщение внутри себя.
HTML-разметка
Разметка в этом примере такая же, как и в предыдущем.
Стили кнопки будут похожи на предыдущий пример. Мы только изменим цвет и положение дополнительного текста:
При наведении мы увеличим справа padding кнопки, а также ширину тега span с классом «a-btn-slide-text»:
В активном состоянии создадим эффект нажатия при помощи тени:
Пример 5
В этом примере мы будем использовать символьный шрифт для иконок. Идея заключается в создании следующего эффекта: при наведении мыши иконка исчезает и появляется движущаяся стрелка.
HTML-разметка
Структура будет состоять из 4 тегов span внутри ссылки. Span с классом «a-btn-slide-icon» будет анимировать стрелку, она будет двигаться сверху вниз.
При наведении мы будем прятать значок слева и бесконечно проигрывать анимацию для стрелки:
При нажатии на кнопку мы сделаем её красной и создадим эффект нажатия добавив тень:
И, наконец, простая анимация для перемещения стрелки сверху вниз:
Пример 6
В этом примере мы создадим круглую кнопку со звездочкой в ней. Мы заставим звезду вращаться при наведении курсора (с небольшим импульсом) и сделаем появление дополнительного текста.
HTML-разметка
У нас будет три тега span в нашей кнопке-ссылке. В последнем будет скрытый текст, который показывается при наведении.
Мы сделаем кнопки круглыми и добавим необычные тени к ним. Для того, чтобы отцентрировать основной текст по вертикали, мы установим display равным table-cell. Звезды и скрытый текст будет позиционироваться абсолютно.
При наведении мы будем менять тень кнопки так, что она кажется поднятой. Скрытый текст будет проявляться, и мы применим анимацию для начального текста. Мы также применим анимацию вращения для звезды:
Теперь сделаем кнопку якобы нажатой при нажатии на нее:
Анимация вращения/пульсации выглядит следующим образом:
Пример 7
В последнем примере мы создадим псевдо 3D-кнопку, использовав некоторые классные тени.
HTML-разметка
Структура будет такая же как и в пятом примере
Стиль будет также очень похож на пример 5, мы просто изменим некоторые цвета и тени:
При наведении мы будем увеличивать кнопку и вращать маленькую иконку:
При нажатии на кнопку, мы сделаем кнопку меньше и нажав на неё, изменим тень:
Вот и всё! Надеюсь, вам понравилось создание некоторых крэйзи-кнопок при помощи CSS3 и вы получили вдохновение для своих экспериментов!
Создаем анимированные кнопки при помощи CSS3
В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.
В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.
Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.
Обратите внимание, что анимация/переходы будут работать только в браузерах, которые поддерживают эти CSS3-свойства.
Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.
Пример 1
В этом примере мы создадим большую кнопку с несколькими элементами на ней. Она будет иметь иконку, основной текст, стрелку с правой стороны и цену, которая будет появляться только когда мы наводим курсор.
HTML-разметка
Структура довольно проста: иконка изображения и другие элементы в тегах span:
В стилях мы убедимся что переходы установлены правильно для элемента, который мы хотим анимировать при наведении. Цена будет невидимой, установим её прозрачность на 0. Применение множества box-shadow позволит нам создавать реалистичные эффекты:
При наведении мыши на кнопку мы будем менять тень, а также покажем цену и спрячем изображение:
В активном состоянии сделаем кнопку нажатой добавив тень. Значок стрелки справа будет увеличен:
Пример 2
Второй пример будет очень похож на первый, только мы добавим несколько новых эффектов.
HTML-разметка
Разметка на этом примере будет такой же, как и в первом примере.
Стили почти такие же, как и в первом примере, мы просто адаптируем цвета. Но мы сделаем другой эффект при наведении. Цена увеличится до исходного размера и иконка исчезнет. Для стрелки изменим цвет фона на красный:
Активное состояние будет таким же, как и в предыдущем примере. Мы будем только изменять цвета. Когда мы нажимаем кнопку, мы будем также поворачивать стрелку:
Пример 3
В этом примере мы попытаемся сделать что-то совершенно другое. Кнопка будет расширяться вниз при наведении и раскрывать еще одно сообщение. Значок стрелки будет слегка вращаться.
HTML-разметка
Разметка в примере 3, будет несколько иной, чем в предыдущих примерах. Текст, который будет скользить вниз, будет в теге span с классом «a-btn-slide-text»:
В нормальном состоянии кнопка будет иметь определенную высоту, мы будем анимировать её при наведении с целью вывода дополнительных сообщений. Дополнительное сообщение «a-btn-slide-text» будет позиционироваться абсолютно и мы будем увеличивать его высоту от 0 до 30 пикселей при наведении.
При наведении мы будем менять высоту кнопки и дополнительный текст. Мы также будем вращать значок стрелки на 45 градусов:
В активном состоянии кнопка будет немного двигаться и изменять цвет, так что кнопка будет казаться нажатой:
Пример 4
В примере 4, мы будем выдвигать дополнительное сообщение, как и в предыдущем примере, но мы сделаем это теперь с правой стороны. Это будет выглядеть как будто кнопка открывает сообщение внутри себя.
HTML-разметка
Разметка в этом примере такая же, как и в предыдущем.
Стили кнопки будут похожи на предыдущий пример. Мы только изменим цвет и положение дополнительного текста:
При наведении мы увеличим справа padding кнопки, а также ширину тега span с классом «a-btn-slide-text»:
В активном состоянии создадим эффект нажатия при помощи тени:
Пример 5
В этом примере мы будем использовать символьный шрифт для иконок. Идея заключается в создании следующего эффекта: при наведении мыши иконка исчезает и появляется движущаяся стрелка.
HTML-разметка
Структура будет состоять из 4 тегов span внутри ссылки. Span с классом «a-btn-slide-icon» будет анимировать стрелку, она будет двигаться сверху вниз.
При наведении мы будем прятать значок слева и бесконечно проигрывать анимацию для стрелки:
При нажатии на кнопку мы сделаем её красной и создадим эффект нажатия добавив тень:
И, наконец, простая анимация для перемещения стрелки сверху вниз:
Пример 6
В этом примере мы создадим круглую кнопку со звездочкой в ней. Мы заставим звезду вращаться при наведении курсора (с небольшим импульсом) и сделаем появление дополнительного текста.
HTML-разметка
У нас будет три тега span в нашей кнопке-ссылке. В последнем будет скрытый текст, который показывается при наведении.
Мы сделаем кнопки круглыми и добавим необычные тени к ним. Для того, чтобы отцентрировать основной текст по вертикали, мы установим display равным table-cell. Звезды и скрытый текст будет позиционироваться абсолютно.
При наведении мы будем менять тень кнопки так, что она кажется поднятой. Скрытый текст будет проявляться, и мы применим анимацию для начального текста. Мы также применим анимацию вращения для звезды:
Теперь сделаем кнопку якобы нажатой при нажатии на нее:
Анимация вращения/пульсации выглядит следующим образом:
Пример 7
В последнем примере мы создадим псевдо 3D-кнопку, использовав некоторые классные тени.
HTML-разметка
Структура будет такая же как и в пятом примере
Стиль будет также очень похож на пример 5, мы просто изменим некоторые цвета и тени:
При наведении мы будем увеличивать кнопку и вращать маленькую иконку:
При нажатии на кнопку, мы сделаем кнопку меньше и нажав на неё, изменим тень:
Вот и всё! Надеюсь, вам понравилось создание некоторых крэйзи-кнопок при помощи CSS3 и вы получили вдохновение для своих экспериментов!
Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов
Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля. Подходит новичкам.
Чтобы применить на практике методы из статьи, нужно:
Базовое понимание HTML.
Базовое понимание CSS.
Редактор кода и браузер.
Что такое псевдоэлементы
Псевдоэлемент ::before вставляет содержимое перед элементом.
Псевдоэлемент ::after вставляет содержимое после элемента.
В чём разница между псевдоэлементом и псевдоклассом?
Псевдоэлементы и псевдоклассы иногда путают, потому что звучат они похоже, хотя по факту — совершенно разные явления.
Синтаксически псевдокласс начинается с двоеточия, а псевдоэлемент — с двойного двоеточия.
Как создать анимацию при помощи псевдоэлементов
Скорее всего, вы уже знакомы со многими свойствами CSS. На всякий случай здесь мы сначала рассмотрим некоторые из них.
Если вы и так знаете о них достаточно, переходите сразу к инструкции.
Transform и Transition
Transform изначально позволяет двигать, поворачивать, масштабировать и наклонять элемент.
Свойство transition устанавливает продолжительность изменений, чтобы анимация была плавной.
Позиционирование с помощью relative и absolute
Значение relative
Relative позволяет контролировать позицию элемента относительно себя в потоке документа. Например, можно перемещать объект, используя его изначальное положение в качестве точки отсчёта:
Как видите, второй бокс сдвигается вправо на 150 пикселей от изначального положения, но это не влияет на поток документа, поскольку пространство, заданное в макете, не меняется.
Значение absolute
Когда мы задаём элементу значение absolute, CSS удаляет элемент из обычного потока документа, перекрывая другие элементы. Элемент со значением absolute располагается относительно блока со значением позиционирования relative — родительского контейнера.
Когда такого блока рядом нет, в качестве точки отсчёта используется тело документа.
Контроль Controlling the stacking order of elements using z-index
Свойство z-index позволяет накладывать элементы один на другой и менять порядок наложения. Если элемент находится выше по порядку наложения, он появится раньше элемента с низким значением:
Создаём анимацию с помощью псевдоэлементов
Начнём первый проект с создания простой анимированной кнопки, чтобы понять, как использовать псевдоэлементы для анимации.
Создаём тег привязки, который позже применим к кнопке.
Переходим к файлу CSS и стилизуем ссылку, чтобы она выглядела, как кнопка.
Пора создать в кнопке псевдоэлемент.
После устанавливаем ширину и высоту пустого элемента равными 100 % родительского элемента — кнопки.
В итоге мы перекрасили фон псевдоэлемента в цвет кнопки и ещё раз добавили секундный переход. Вот что получится:
Вот что получается:
Поскольку мы добавили translate к самой кнопке, изменения пройдут плавно.
Последний шаг: применим overflow: hidden к кнопке, чтобы скрыть любой элемент, выходящий за пределы контейнера. Свойство скроет псевдоэлемент, мы увидим его, когда он вернётся в начальную позицию.
Итак, мы создали анимированную кнопку с помощью псевдоэлемента. Полный код тут.
Создаём продвинутую анимацию для профиля с помощью множества псевдоэлементов
Теперь усложним задачу и сделаем более сложную анимированную карточку профиля, используя уже четыре псевдоэлемента. Сделаем интересный эффект при наведении курсора. Вот что будет в разметке.
Мы создали простую карточку div с данными пользователя: именем и должностью.
Переходим к CSS и изменяем стиль карточки.
Поскольку у блока info div нет фиксированной ширины и высоты, псевдоэлемент принимает ширину и высоту родительской карточки.
Затем мы наклоняем его на 30 градусов и сдвигаем на 100%. Блок сдвигается вправо. Отрицательный индекс гарантирует, что он останется за текстом. Делаем блок полупрозрачным.
Переходим к следующему псевдоэлементу:
Сделали примерно то же, что и раньше, только изменили направление наклона на противоположное и добавили тень блока, чтобы имитировать 3D.
Теперь сделаем так, чтобы при наведении курсора на карточку псевдоэлементы двигались внутрь карточки. Добавим transition для плавной анимации.
Теперь делаем псевдоэлементы для самой карточки.
Всё уже понятно из кода. Повторяем всё то же, что уже делали, просто передвигаем псевдоэлемент ::before вправо на 85 процентов. Затем создаём последний псевдоэлемент и наклоняем его в другую сторону.
Как вы уже догадались, при наведении курсора псевдоэлементы сдвигаются внутрь. Но в этот раз траектория будет больше.
Меняем цвет текста на белый и делаем его прозрачным. Когда курсор на карточке, прозрачность убираем, чтобы текст стал видимым.
Пока всё. Как видим, псевдоэлементы ::before и ::after помогают разработать анимацию.
Создание анимационной кнопки
Дата публикации: 2010-12-07
От автора: В этом уроке мы будем создавать анимационную кнопку, точную кнопку, которая будет реагировать на наведение курсора мышки. А с помощью фреймворка JQuery заставим нашу кнопку плавно изменять цвет при наведении курсора на кнопку. Таким образом, мы заставляем пользователя нажать на кнопку (заставляем его действовать).
Давайте перечислим все наши действия, которые мы будем выполнять в уроке:
Нарисуем кнопку в Photoshop’е
Сверстаем кнопку с помощью HTML/CSS
Добавим эффект плавности с помощью фреймворка JQuery
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Шаг 1: Photoshop
Наша кнопка будет размерами 200х50px. Но мы будем рисовать сразу две кнопки, для двух различных состояний, поэтому высота полотна у нас будет 100px (дальше вы поймете, почему мы две кнопки рисуем).
Давайте для начала зайдем в Photoshop и создадим полотно (Ctrl + N) размерами 200х100px.
Чтобы нам было проще рисовать кнопки, мы разделим полотно специальными линиями. Чтобы их включить, жмем Ctrl + R или View> Rulers.
Создаем форму кнопки. На панели инструментов выбираем инструмент Rounded Rectangle Tool, а в панели параметров (вверху) поставим округлость углов 8px.
Когда у нас выбран и настроен для работы инструмент Rounded Rectangle Tool, создаем нашу кнопку путем зажимания ЛКМ в верхнем углу полотна и тянем к правому углу.
Оформляем кнопку. Для этого нужно открыть меню с настройками стилей, кликнуть 2 раза ЛКМ на слой с формой кнопки.
Добавим градиент. Для этого нажмите на Gradient Overlay. Затем нажмите на градиент для открытия окна редактирования градиента, чтобы выбрать нужные нам цвета.
Добавляем внутреннее свечение. Это даст кнопки тонкие белые границы. Жмем Inner Glow, ставим непрозрачность на 100% и меняем цвет свечения на белый (# FFFFFF), а размер свечение в 3px.
Добавляем темно зеленую 1px границу нашей кнопке. Для этого заходим в Stroke и ставим размер 1px, позиция inside (рамка будет внутренней), а цвет рамки темно зеленый – (#60694f).
Пишем текст на нашей кнопке, например «отправить». Для этого на панели инструментов выбираем инструмент Horizontal Type Tool, а в панели параметров ставим шрифт Arial, стиль шрифта Bold (жирный), размер шрифта 24px, сглаживание Sharp, затем нажмите на любом месте полотна и напишите свой текст.
Оформляем текст кнопки. Для этого опять открываем меню с настройками стилей (Layer Styles), кликаем 2 раза ЛКМ на слой с текстом. И делаем градиент, как это мы делали, только на этот раз для левой стороны цвет — #505548, а для правой — #9ca388. У вас должно получиться вот так:
Теперь добавим к нашему тексту внутреннюю тень. Заходим в Inner shadow. Ставим угол наклона тени 90 градусов, расстояние в 1px, размер ставим 2px, цвет внутренней тени черный (#000000) и помутнения (Opacity) на 75%.
Добавим к тексту немножко внешней тени. Нажимаем на Drop Shadow и делаем цвет тени светло-зеленого цвета (#dde4cf). Ставим помутнения на 100%, угол тени 90 градусов, расстояние 1px и размер в 2px (равно как и во внутренней тени).
Создаем изображение кнопки для состояния нover
Hover — состояние кнопки когда пользователь помещает над кнопкой курсор.
У нас уже есть изображения кнопки для нормального состояния, теперь мы создадим изображение для состояния, когда курсор на кнопке.
Мы все наши слои поместим в папку с названием «norm» (изображение нормального состояния кнопки), потом папку «norm» копируемо и переименовуем в «hover» (изображение активного состояния кнопки).
Создаем папку «norm», нажимаем (Ctr + G) или кнопку в виде папки, называем ее «norm» и перетаскиваем все наши слои в папку.
Теперь копируемо папку «norm», нажимаем по ней ПКМ (правый курсор мыши) и жмем Duplicate group, новую папку называем «hover».
Жмем на папку «hover», а затем нижней кнопкой клавиатуры или инструментом Move Tool (V) опускайте кнопку Hover в нижнюю часть холста, как это на скриншоте показано. Кнопки нужно стыковать краями. Для того чтобы это лучше сделать, можете увеличить изображение инструментом Zoom Tool (Z).
Меняем настройки слоев в папке Hover
Заходим в папку «hover», дважды щелкнув на слой формы кнопки, чтобы вызвать меню Layer Styles, затем заходим в настройки Gradient overlay и настраиваем градиентную заливку. Левой стороне — цвет #656664, а правой — #959691.
Дважды щелкните на слой с текстом в папке Hover, чтобы открыть меню Layer Styles. Во вкладке Drop shadow меняем цвета теней на серый цвет (#cdcfcd).
Последний штрих, который мы добавим – это градиент для текста. Заходим в Gradient overlay и в левой стороне меняем цвет на #f4f3f3, а для правой — (#f5f5f5). Смотрим скриншот конечного варианты кнопки:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Анимированная кнопка меню
Набор анимационных эффектов для кнопки меню, которая при клике меняет свой вид.
Основная разметка
Мы реализуем 4 примера. HTML разметка для каждого из них идентична. Отличие будет только в названии класса. Каждая кнопка будет состоять из контейнера и внутреннего тега span:
OK, теперь давайте писать CSS.
Общий CSS
Для начала сбросим стандартные стили браузеров. Затем определим ширину и высоту кнопок. CSS:
Теперь внутренний span будет контейнером для наших линий. Для их создания воспользуемся псевдо-классами ::before и ::after. Позиция для каждой из них будет рассчитывать автоматически в зависимости от размеров контейнера. CSS:
Итак, иконка у нас есть. Теперь приступим к вариантам анимации.
Стиль 1
Самый простой вариант. Разворот всех трёх линий. CSS:
Стиль 2
В данном примере мы используем две прямые, чтобы их развернуть, что позволит получить знак “x”. CSS:
Стиль 3
В данном примере содержимое иконки поворачивается на 180 градусов. CSS:
Стиль 4
Данный эффект похож на предыдущий, только стрелка смотрит в другую сторону. CSS:
Немного JavaScript-а
Теперь нам осталось реализовать активное состояние иконки. Для этого нам понадобится JavaScript:
В данном примере я перебираю все иконки. В вашем же примере она будет одна, так что вам нужно будет чуть подправить JS.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://callmenick.com/post/animating-css-only-hamburger-menu-icons
Перевел: Станислав Протасевич
Урок создан: 30 Апреля 2015
Просмотров: 23830
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
Кнопки | CSS
Простая HTML кнопка для сайта
Есть несколько типов input для создания кнопки и тег button [ type=»button | reset | submit» ]. Внешне и функционально они абсолютно одинаковы.
Как сделать кнопку на CSS
Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку.
Создание кнопки: «А нужно ли изменять вид кнопки при наведении или делать кнопку с эффектом нажатия?»
Надо признать, что сложнее всего придумать как будет вести себя кнопка во время нажатия.
Код кнопки для сайта
Иногда самый простой внешний вид может выглядеть более стильно, чем навороченная с крутыми эффектами кнопка. Взгляните, как она тут [cssdeck.com] смотрится.
Кнопка с градиентом
Градиенты плохо поддаются анимации, плавной смене цвета фона. Что же делать? Ответ: box-shadow [перейдите по ссылке, там есть суперская форма входа].
А вот всякие перемещения работают на ура.
Довольно популярно разделение кнопки на два цвета
Красивые кнопки CSS
Кнопки «Скачать» CSS
Стилизация кнопок с помощью CSS
Анимированная кнопка: «свечение текста»
Стиль кнопок с бликами
Кнопки меню
Объёмная кнопка CSS
Вдавленная кнопка
Выпуклая кнопка HTML
Круглые CSS кнопки
Анимированная кнопка CSS
Анимированное заполнение происходит так (тут нет лишнего кода, связанного с кнопкой). Другие интересные эффекты загрузки можно найти тут [tympanus.net].
3d кнопка CSS
Оформление кнопок
Кнопки сайта следует выполнять в едином стиле, чтобы не оставалось сомнений, что если здесь нажать, то произойдёт какое-то действо.
Именно поэтому у 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, но в Хроме нужно подключать картинку, я не стала поэтому расписывать.
Для высоты сложнее. Можно указать одинаковую height и line-height, но line-height не поддерживается некоторыми мобильными браузерами, например, Opera Mini. Совсем убрать padding.
если для одной страницы, то должна быть кнопка для перехода в «HTML»-режим при написании/редактировании статьи. В нужное место добавляете и стили, и кнопку. Только в этом случае стили нужно вписывать обязательно внутри
Ирина, благодарю за комментарий! Анонимный Понимаете, я в этих кодах не разбираюсь, но. кнопки очень понравились. сайтами не занимаюсь, но красиво подать ссылку на файл попробовал. тупо вставил код кнопки добавил адрес на файл и вроде работает! Пример: http://bogoglasnik.ru/load/88-1-0-1380?l_ZeHf (начинающий) Анонимный Добрый день. Подскажите пожалуйста, как сделать кнопку что бы она была ссылкой, вела на другую страницу? Где вписать ссылку
А так вроде со всем разобрался и с цветом и размером, а вот как сделать ее ссылкой что бы при нажатии переходить на другую страницу
Заранее благодарен. NMitra Заполните атрибут href (подробнее http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html )
background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114));
Вот сейчас опять перечитываю в поисках как убрать подчёркивание.
Очень не хватает просто подробного описания, какой параметр что значит.
Всякие комбинации служебных слов перепробовал, но понять так и не смог.
Может что подскажете. Заранее огромное Спасибо!
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;
>
Спасибо за участие и заданное направление.
За отклик и направление Огромное Спасибо. 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;
>
Тут приятно, что класс кнопки, отвязан от класса иконки. Значит используем один класс на все кнопки приложения и лишь меняем классы иконок по надобности.
Спасибо вы натолкнули на верный путь, с уважением sharpionok Анонимный Вместо HTML кода напечаталась ссылка чёрти куда. Как показать код в HTML не понимаю.=(
Animation на CSS
Дополнительное видео
Я полагаю, многие из вас встречали подобные кнопки на сайтах, но возможно не все знают, как реализовать такой анимированный эффект на CSS. Смотрите, обучайтесь и обязательно делитесь своими примерами в комментариях под видео.
See the Pen BmqQoX by Denis (@Dwstroy) on CodePen.
Делаем каркас анимированной кнопки
На этом, с файлом index пока работы закончены, переходим к описанию стилей.
Описываем стили общей структуры кнопки
Отобразим границы пульсирующего блока при помощи outline в 1 пик., зададим размеры блоку в 90 пик. Текст с иконкой делаем белым цветом, центруем его по середине, добавляем цвет фона, а при помощи border-radius в 50% делаем закругление.
Для удобства все с позиционируем по центру экрана.
Скроем текст, что бы он не мешал.
Оформляем иконку в CSS
Следующей задачей, создаем анимацию при наведении.
Описываем анимацию и пульсирующий эффект кнопки
Затем остается элемент в начальном положение скрывать, а при наведении его отображаем.
Далее описываем ключевой кадр, где при помощи трансформации наклоняем в стороны трубку.
А для того чтобы она также плавно появлялась, прописываем для элемента иконки transition в 0.5s.
Описываем Анимацию пульсирующего элемента
Ниже описываем кадр самой анимации.
Для того что бы они срабатывали по наведению делаем событие :hover и в начальном положении делаем элементы не видимыми.
В принципе кнопка готова, можно также добавить дополнительно блок для курсора, по нажатию на который будем выполнять какие-то действия.
Добавим изменения основного фона кнопки на более темнее
Делаем плавность ее появления.
В принципе на этом все, получили простенькую анимацию, на базе которой вы уже сможете делать свои иконки с пульсирующем анимированным эффектом.
Используйте, внедряйте знания, которые приобрели, и обязательно в комментариях делитесь своими примерами, что у вас получилось.
Урок подготовил Горелов Денис, до встречи в следующих видео по CSS.
Оставить комментарий:
Отзывы
Спасибо большое за очень полезную информацию.
Но в вашей бочке меда есть ложка меда. т.к. нет примера подключения возможности перехода по гиперссылке на нужную страницу по событию клика левой клавиши мышки.
4 простых эффекта CSS для кнопок
В данном уроке рассматриваются четыре очень простых кнопки CSS с эффектами анимации при наведении курсора мыши на них.
Общие установки
Прежде чем разбираться с кнопками, рассмотрим общие для всех них установки.
Для кнопок будет использоваться очень простой HTML код:
Также все кнопки будут иметь общие установки для текста надписи и отмену выделения ссылок:
Увеличивающаяся кнопка
Основной код CSS
Для начала нам нужно только задать кнопке форму и цвет. Определяем высоту 28px и ширину 115px, добавляем поля и отступы, а также задаем кнопке светлую рамку.
Эффекты CSS3
Некоторым людям нравится, когда простая кнопка сопровождается достаточно большим кодом CSS. В данном разделе приводятся дополнительные стили CSS3 для нашей кнопки. Вполне можно обойтись и без них, но они придают кнопке более современный вид.
Округляем углы рамки и добавляем градиент. Здесь используется небольшой трюк с темным градиентом, который взаимодействует с любым цветом фона.
Анимация CSS
Теперь установим переход CSS. Анимация будет использоваться для любых изменений свойств и длиться полсекунды.
Наведение курсора мыши
Осталось только добавить стиль для расширения кнопки при наведении курсора мыши на нее. Кнопка должна иметь ширину 230px для отображения всего сообщения.
Простое изменение тональности цвета
Очень простой и популярный эффект CSS для кнопки. При наведении курсора мыши плавно меняется тональность фонового цвета.
Основной код CSS
Код CSS очень похож на предыдущий пример. Используется другой цвет фона и немного изменена форма. Также центрируется текст и установлена высота строки для кнопки, чтобы происходило вертикальное центрирование.
Эффекты CSS3
Устанавливаем скругление углов, градиент для фона и дополнительную тень. С помощью rgba делаем тень черной и прозрачной.
Анимация CSS
Анимация практически не отличается от предыдущего примера.
Наведение курсора мыши
При наведении курсора мыши будет устанавливаться другой цвет фона. Попробуйте выбрать более светлый вариант цвета в Photoshop, чтобы получился отличный эффект.
Сдвиг фонового изображения
Данный эффект может получиться весьма впечатляющим в зависимости от выбора фонового изображения. В демонстрации используется невзрачный фон и эффект выглядит невзрачно. Попробуйте использовать другую картинку и может получиться ошеломляющий эффект.
Основной код CSS
Основная часть кода не отличается от предыдущих примеров. Обратите внимание на то, что мы используем фоновое изображение. Начальное положение фона установлено в «0 0». При наведении курсора положение сдвигается по вертикали.
Эффекты CSS3
Анимация CSS
Анимация для данного случая длится дольше, чтобы создать плавный и интересный эффект.
Наведение курсора мыши
Теперь пришла пора сдвигать фоновое изображение. Начальное положение было «0 0». Устанавливаем второй параметр в значение 150px. Для сдвига по горизонтали требуется изменить первый параметр.
3D имитация нажатия кнопки
Последний пример в нашем уроке посвящен популярному методу 3D имитации нажатия кнопки при наведении на нее курсора мыши. Анимация для данного случая настолько проста, что даже не требуется задавать переход CSS. Но конечный результат получается вполне впечатляющим.
Основной код CSS
Код CSS для нашей кнопки.
Эффекты CSS3
В данном случае CSS3 перестает быть приятным опционом. Для получения эффекта требуются тени и градиент. Резкая тень создает видимость 3D кнопки.
Наведение курсора мыши
Источники информации:
- http://dwstroy.ru/video/azbuka-ot-a-do-css/knopka-s-animatsiey-dlya-sayta-na-css/
- http://habr.com/en/post/132186/?mobile=no
- http://habr.com/ru/post/132186/
- http://habr.com/ru/company/netologyru/blog/655337/
- http://webformyself.com/sozdanie-animacionnoj-knopki/
- http://ruseller.com/lessons.php?id=2301&rub=2
- http://shpargalkablog.ru/2012/04/css-knopki.html
- http://dwstroy.ru/video/azbuka-ot-a-do-css/animation-na-css-animirovannaya-knopka/
- http://ruseller.com/lessons.php?id=1351