hover.css анимация для ваших кнопок


Содержание

hover.css: красивая анимация для ваших кнопок

Коллекция различных видов CSS3 анимации, которые можно применит к кнопкам, логотипам и другим объектам.

Коллекция различных видов CSS3 анимации, которые можно применит к кнопкам, логотипам и другим объектам.

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

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

К примеру, мы хотим эффект Grow:

  • Качаем hover.css
  • В файле hover.css, находим стиль для анимации типа ‘Grow’ (комментарии в помощь):
  • Копируем эффект к себе в таблицу стилей.
  • В HTML коде, нужному элементу выставляем класс .grow.

К примеру, применим данную анимацию к ссылке:

Интересные эффекты анимации hover на CSS3

В CSS3 предусмотрено очень много интересных эффектов. Данная статья посвящена эффектам анимации hover

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

Ниже будут подробно рассмотрены следующие эффекты:

1. Крутящийся элемент

2. Дрожащий / дергающийся элемент (анимация Tada)

3. «Падающая» иконка

4. Выезжающая иконка

5. Выезжающая иконка как на CoolWebMasters

6. Кнопка с бликом

7. Кнопка с увеличивающимся внутренним border

8. Качающаяся кнопка (анимация Swing)

9. Двойной текст с использованием data-hover

10. Выезжающий текст снизу с использованием data-hover

1. Крутящийся элемент

Хорошо подходит для маленьких элементов типа закрывающего крестика или стрелочки. На текстовые ссылки такое, конечно, вешать не надо.

Разметка здесь очень простая:

Непосредственно за кручение отвечает свойство transform, все остальное — украшательства (еще в этом примере плавно меняется значение прозрачности opacity).

2. Дрожащий / дергающийся элемент (анимация Tada)

Часто такую анимацию вешают на иконки соцсетей и другие небольшие элементы. А выглядит это вот так:

Верстка здесь такая же, как в предыдущем примере:

А в css нужно написать не только свойства этого div, но и саму анимацию:

3. «Падающая» иконка

Верстка этого элемента состоит из внешнего элемента А со SPAN внутри, который содержит иконку в качестве background:

Как видно из примера, анимация происходит вследствие изменения значения top у блока с иконкой. У внешнего блока нужно обязательно указывать overflow: hidden, так как иконка уезжает за его пределы.

4. Выезжающая иконка

Здесь тот же принцип, что и в предыдущем примере, – анимируется положение иконки внутри ссылки при наведении на нее. Только верстка немного изменена — иконка задается как background к псевдоэлементу :before.

Внешний элемент .btn2 должен иметь position: relative, так как блок с иконкой спозиционирован абсолютно. Также есть небольшая анимация margin на span с текстом внутри .btn2 (.btn2:hover span), которая отодвигает его при появлении иконки.

5. Выезжающая иконка как на CoolWebMasters

Анимация достигается за счет изменения background-position элемента. Нужно подготовить картинку с двумя состояниями иконки:

6. Кнопка с бликом

Блик делается через псевдоэлемент :after, который повернут на 35 градусов.

Верстка совсем простая, достаточно присвоить ссылке класс:

7. Кнопка с увеличивающимся внутренним border

Здесь внутренний border сделан через inset text-shadow, которая и анимируется.

CSS для анимации здесь такой:

8. Качающаяся кнопка (анимация Swing)

Выглядит это вот так:

Верстка здесь такая же, как в предыдущем примере, только ссылке задан класс btn6. В CSS нужно прописать стиль для :hover и саму анимацию swing.

9. Двойной текст с использованием data-hover

А вот еще один интересный эффект, который подойдет к текстовым ссылкам на цветном фоне:

В верстке этого элемента добавился атрибут data-hover, который содержит текст, прилетающий при наведении.

В CSS анимируется псевдоэлемент before, в который и передается текст из data-hover:

10. Выезжающий текст снизу с использованием data-hover

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

В верстке внутрь ссылки нужно вставить span.

50 примеров CSS3 кнопок с эффектами и анимацией

Я отобрал некоторые кнопки CSS , которые, на мой взгляд, могут быть использованы в веб-проектах.

Генератор кнопок CSS3

Посмотрите на генератор CSS3 кнопок от Sanwebe :

Розовая кнопка CSS3 со шрифтом Pacifico

Симпатичная розовая кнопка ( не считая небольшого кода jQuery для проигрывания музыки и изменения внутреннего текста ) полностью создана на основе CSS3 :

Коллекция 3D кнопок

Коллекция 3D кнопок , созданная с помощью CSS3 :

Социальные 3D кнопки

Отличные социальные кнопки, выполненные с помощью CSS3 и шрифта для иконок:

Анимированные CSS3 кнопки

Анимированные CSS кнопки с фоновыми узорами. Могут не работать в браузерах Firefox 3.6 и IE10 :

Круглые анимированные кнопки CSS3

Еще одни анимированные кнопки, в которых поворот текста при наведении мыши дает по-настоящему привлекательный эффект:

Кнопки Clean Circle

Вот еще один пример круглых кнопок CSS3 :

Кнопки-переключатели на CSS3

Хорошо выполненные переключатели, созданные с помощью CSS3 и шрифта иконок:

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

Симпатичная трехмерная кнопка, созданная с помощью CSS3 и шрифтов Google :

Эффекты кнопок CSS3

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

Цукерберг рекомендует:  Чем кодер отличается от программиста

Глянцевые кнопки CSS3

Теперь можно быть абсолютно уверенным, что глянцевые кнопки можно легко создать при помощи CSS3 , больше никакого Photoshop :

Трехмерные кнопки CSS3

Удивительно, что можно сделать с помощью псевдоэлементов CSS3 :before и :after . Оцените поразительные трехмерные кнопки:

Переключатель CSS3

Пример кнопки-переключателя на CSS3 без использования JavaScript :

Эффект трехмерной переворачивающейся кнопки

Эффект трехмерной переворачивающейся при нажатии кнопки, созданной с помощью CSS3 :

Брендовые кнопки

Красивые кнопки CSS популярных брендов, использующих иконки bootstrap :

Темная круглая кнопка

Круглая кнопка с использованием jQuery для придания эффекта капли при нажатии на кнопку:

Переключатель CSS3

Переключатель, созданный с помощью CSS3 :

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

Коллекция плоских кнопок CSS на все случаи жизни, без анимации и эффектов:

Кнопки общего доступа в социальных сетях

Более привлекательная версия кнопок общего доступа, но без функционала. По версии разработчика, должны работать в IE7+ :

Рождественская кнопка

Рождественская CSS кнопка , использующая data:urls – метод для встраивания изображения прямо в документ:

Мягкая кнопка

Круглая глянцевая кнопка, созданная с помощью CSS3 :

Мягкая кнопка Soft Button

Кнопки используют только символы Unicode , что позволяет использовать текстовые или иконочные шрифты:

Крупные трехмерные анимированные кнопки CSS3

Еще один набор трехмерных анимированных CSS кнопок для сайтов. Анимация выполнена с помощью свойств animation и keyframes :

Металлические CSS3 кнопки

Коллекция металлических CSS3 кнопок , символы на которых были созданы с помощью шрифта pictos с использованием @font-face . Для металлического эффекта были задействованы свойства box-shadow и linear-gradient :

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

Еще одна коллекция круглых анимированных кнопок на CSS3 :

CSS3 кнопки социальных сетей с возможностью нажатия

Кнопки используют простые CSS3 свойства , такие как gradients , box-shadows , text-shadows и так далее. Состояние « ожидание » и « активное » также включены в этот набор:

Простые CSS3 кнопки

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

Трехмерная кнопка загрузки

Эта трехмерная кнопка использует трансформацию perspective . Она работает только в браузерах на основе webkit :

Поразительные CSS3 кнопки социальных сетей

Эти кнопки социальных сетей используют как базовый фон свойства liner-gradient , box-shadow для трехмерного эффекта:

Большая кнопка

Солидная глянцевая CSS3 кнопка с эффектом тени внизу. Для кнопки используется шрифт под названием Sansita One из коллекции Google :

Простые кнопки

Несколько простых CSS кнопок :

CSS3-кнопки социальных сетей

Еще один набор кнопок социальных сетей. Для создания самих кнопок используются псевдоэлементы :before и :after :

Простые CSS кнопки

Набор незамысловатых CSS кнопок . Они просты в настройке и использовании. Их можно легко интегрировать с Font-Awesome или другой библиотекой:

Кнопки в виде покерной фишки

Пример простой кнопки в виде фишки для игры в покер. Она может быть также использована как кнопка с эффектом наведения:

Кнопка-ползунок

Концепт CSS кнопки-ползунка :

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

Панель администратора ( меню или навигация ) с использованием CSS3 и фреймворка fontawesome . При переключении на кнопку класс active добавляется с помощью jQuery :

Пришитая кнопка

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

Вращающаяся кнопка

Круглая кнопка с вращающейся границей для индикации наведения курсора мыши:

Кнопка на CSS3

Мягкая кнопка, созданная с помощью CSS3 на основе этого примера :

CSS3 кнопка с выдвигающейся карточкой

Эти кнопки CSS выглядят как карты, выскальзывающие из рукава. Они могут использоваться для вывода информации, которая должна быть скрыта, пока пользователь не сделает выбор:

Анимация CSS3 кнопки в виде конфеты

Кнопка с анимацией для отображения состояния загрузки:

CSS3 переключатели

Красивые переключатели, которые используют jQuery для переключения класса:

Глянцевые кнопки

Набор красивых кнопок для сайта CSS . Используются различные свойства для придания трехмерного глянцевого вида:

Трехмерные кнопки с разноцветной границей

Кнопки с границами разных цветов:

8-битный эффект при наведении

Обратите внимание на эти великолепные кнопки с эффектом 8 бит, срабатывающем при наведении курсора:

Кнопки Салливан

Простые кнопки, использующие иконки из FontAwesome :

Чувственные SCSS кнопки в цветовой модели HSB

Несколько CSS кнопок с иконками из FontAwesome :

Набор кнопок

Очередной набор чистых кнопок для веб-приложений:

Кнопка-переключатель

Кнопка-переключатель на основе Bootstrap :

Анимированные кнопки


Коллекция анимированных CSS3 кнопок для придания особого колорита вашему сайту:

Красочные кнопки

Коллекция CSS кнопок различных цветов:

Данная публикация представляет собой перевод статьи « 50 CSS3 button examples with effects & animations » , подготовленной дружной командой проекта Интернет-технологии.ру

15 css-эффектов при наведении для кнопок на вашем сайте

Всем привет! На улице жарко, но по своему и своеобразно «жарит» новый алгоритм Яндекса под названием «Минусинск» (прочитайте, что это за зверь такой). Но я сейчас не об этом.

Изучая данные о том, что интересно посетителям ipetrenko.com, я выяснил что особой популярностью пользуются материалы о css эффектах при наведении.

Ну что же, мне и самому интересна эта тема поэтому «ловите» новый материал об эффектах для кнопко-подобных ссылок.

Редактировать цвета и стили селекторов можете на свое усмотрение. Теперь приступим к самому главному — к эффектам, демонстрацию которых можно посмотреть прямо на ЭТОЙ странице. И это еще не всё — css-эффектов будет не пятнадцать, а . семнадцать.

Создаем оригинальные hover-эффекты при помощи CSS3

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

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

HTML-разметка

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

Внутри блока с классом view вставим элемент с классом mask, который будет отвечать за наши эффекты CSS3, внутри него мы и поместим название, описание и ссылку на полное изображение. (Для некоторых примеров, нам нужно будет добавить mask как отдельный элемент и обернуть описание в div с классом content.)

После создания разметки мы создадим наши стили.

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

А теперь мы рассмотрим десять эффектов.

Пример 1

Добавим специальный класс view-first в элемент с классом view для этого эффекта. Мы будем добавлять специальный класс для каждого экземпляра view элемента (view-first, view-second, view-third, и т.д.).

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

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

Пример 2

Во втором примере мы добавим специальный класс view-second, но мы оставим элемент с классом mask пустым и обернем описание в div с классом content.

Здесь класс mask будет иметь различные атрибуты, в частности мы собираемся применить свойство transform (translate и rotate). Описание элементов будут перемещены так, чтобы мы могли сдвинуть их вместе при наведении:

Для нашего hover-эффекта мы используем translate-преобразование для того, чтобы перемещать наши элементы на место. mask также будет поворачиваться. Элементы описания будут двигаться с небольшой задержкой:

Пример 3

В третьем примере мы будем использовать translate и rotate преобразование:

Это простые инструкции, которые будут применяться при наведении. Теперь мы будем переворачивать описание элементов, установив transition-delay соответственно:

Цукерберг рекомендует:  Навигация для мобильного устройства
Пример 4

В четвертом примере мы выполним простое уменьшение изображения и увеличение нашего контента с вращением, все это благодаря scale преобразованию. Мы установим transition-delay равным 0,2 для стилей изображения, но при наведении мы изменим его на 0s. Это позволит начать анимацию немедленно при наведении мыши, но задержать её когда курсор уходит.

Это инструкции, чтобы получить этот эффект — с CSS3 можно делать все :).

Пример 5

В этом пятом примере мы будем использовать свойство translate наряду с transition-timing-function ease-in-out для того, чтобы сдвинуть контент с левой стороны.

Эффект при наведении будет сдвигать изображение вправо и описание появится с левой стороны, как если бы оно сдвинуло картинку:

Пример 6

В этом примере мы сделаем описание появляющееся спереди, уменьшим изображение до исходного размера (scale c 10 до 1). Кнопка «read more» будет появляться снизу (translate).

Обратный переход будет задержан таким образом, чтобы он выглядел гладким:

Пример 7

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

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

Пример 8

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

Мы добавим анимацию для элемента mask и определим некоторые установки задержки для элементов описания:

Чтобы воссоздать настоящий эффект отскока мы воспользуемся translateY, как вы можете видеть там несколько кадров, которые создают этот эффект:

Пример 9

В этом примере мы будем использовать два элемента mask, чтобы сдвигать их с правого нижнего и с левого верхнего углов:

Элементы mask будут иметь различные значения translation и transfrom-origin. А также мы укажем что один выровнен по верхней границе, а другой по нижней:

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

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

Пример 10

В последнем примере, мы будем увеличивать изображение, а затем прятать, перенося описание на передний план. Мы можем сделать это, используя шкалу преобразования (scale transform) и настраивая уровень прозрачности:

При наведении мы просто масштабируем изображение, а зачем прячем его, уменьшив его прозрачность до 0:

Заключение

CSS3 имеет действительно большой потенциал для создания красивых эффектов. Вскоре, надеюсь, мы будет в состоянии избегать использование JavaScript для создания простых эффектов и полагаться на 100% на CSS, во всех браузерах.

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

Анимация кнопок с библиотекой Hover CSS

Дата публикации: 2020-12-03

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

Сегодня уже фактически стало стандартом использование готовых наборов стилей для своих проектов. Это могут быть как свои собственные наработки, так и сторонние: фреймворки и библиотеки. Ярким примером здесь может быть библиотека Animate.css, без которой сегодня не обходится практически ни один одностраничный сайт.

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

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

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

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Cloudflare Ray ID: 535f8c71df8a8ed7 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

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

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

Анимированная кнопка на CSS / Button animation CSS3

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

ПОДПИСКА на УРОКИ

Анимированная кнопка на CSS / Button animation CSS3

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

See the Pen VrEKLb by Denis (@Dwstroy) on CodePen.

  • в уроке задействуем основные стили как:
  • псевдоэлементами :before , :after ;
  • при помощи position с позиционируем блоки
  • псевдоклассами :hover , :activ определим стили при наведении и клику мышки
  • и сделаем плавную анимацию при помощи transition, transform

HTML структура кнопки

Имея эскиз перед глазами можно уже представить, как это реализовать на CSS. Нам понадобится основной блок, где будет помещены все элементы кнопки, это будет ее оберткой. Затем у кнопки будет внутренняя часть, которая выезжать при неведении мышки, внутри будем располагать текст «Смотреть пример». Затем идет левая и правая часть кнопки, между ними расположим псевдоэлементы треугольной формы. Да и чуть не забыл, картинка в виде стрелочек. Все это нам нужно будет анимировать, и придать кнопки определенную текстуру.

Открываем свою среду разработки, в моем случае я использую PhpStorm, создам в ней index.html , пропишу название «Button DEMO animation CSS». Создаем , в нем располагаем блок div , с классом .dws-button, (это будет нашей оберткой для кнопки). В обертке расположим ссылку, в которой поместим три блока, div с классом .b-demo (это левая часть кнопки), за ней идет div с классом .b-text (это внутренний блок который выезжать с надписью) и завершающий блок div с классом .b-img как вы догадались это правая сторона и в ней расположим картинка.

Жмем применить и структура сформирована.

В ссылке поставим решетку ( # ), что бы она была активна. Пропишем название кнопки «Демо«, в среднем блоке указываем текст «Смотреть пример«, и в нижнем вставляем путь до картинки.

Создаем директорию в которую скопирую картинки, вы можете вставить свои картинки или скачать архив с готовы кодом.

Цукерберг рекомендует:  Управление требованиями как залог успеха проектной работы

Прописываем путь до картинки src=»img/icon.png» , указываем alt=»button» , на этом у нас каркас готов самой кнопки и можно переходить к оформлению стилей.

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

Следующим этапом, создадим CSS файл style.css и подключим его к индексной странице. Сразу подключаем по ходовой шрифт Cuprum , и больше нам индексный файл не понадобится.

Переходим в style.css , подключаю картинку на задний фон, и сбрасываем всем элементам отступы в блоке .dws-button .

Самой кнопке задаем стиль текста, пропишем ширину ее в 250 пик. и высоту в 70 пик., центруем по середине экрана и делаем отступы с верху в 250 пик. Затем присвоим ей окантовку в 1 пик. для того что бы мы могли видеть границы кнопки при ее анимации когда она будет растягиваться.

У ссылок убираем подчеркивание и назначим им серый цвет.

Затем сразу отберем блоки и зададим им единый белый цвет.

Далее опишем каждый блок по отдельности, отбираем класс .b-demo и зададим блоку ширину в 105 пик.. Высоту зададим при помощи line-height: 70px; , центруем текст и увеличим шрифт до 30 пик.. Делаем его полностью заглавными буквами, и padding задаем левые и правые отступы.

Отбираем следующий блок .b-text , присваиваем ему темный цвет, текст сделаем светлым, указываем размер ему в 24 пик., задаем ширину в 150 пик. и при помощи отступов уменьшим высоту блока. Центруем текст, и задаем внутренние отступы.

Отбираем правый блок, устанавливаем ширину в 45 пик. высоту тоже в 45 пик. .padding отцентруем элемент картинки чуть сместив ее правее.

Затем с позиционируем эти элементы по отношению блока с классом .dws-button . Для этого присваиваем классу position: relative; а вложенным всем блокам position: absolute; .

Блоки все подстроили под родителя, и теперь пробежимся по ним и отцентруем их.

Классу .b-demo укажем начальные позиции по нулям с лева и сверху и добавим z-index:10; что бы этот блок был выше остальных.

Блоку с текстом сделаем отступы с лева и сверху по 5 пик.

А блок с картинкой .b-img делаем отступ с левой стороны в 140 пик. , и сверху задаем в 0. Тут же закруглим углы с правой стороны в 10 пик.

И тоже проделаем с левым блоком.

Затем нам нужно сделать два псевдоэлемента, это те самые уголки, которые расположены на их соединении.

Отбираем правый блок и присваиваем ему псевдоэлемент :before , устанавливаем ширину и высоту по нулям, и при помощи border рисуем треугольник. Далее нам нужно его с позиционировать, для этого добавляет его в наш набор.

И выравниваем таким образом, что бы он встал в конце блока.

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

Затем отбираем следующий блок с картинкой и присваиваем ему псевдоэлемент :after . Прописываем контент, далее ширину и высоту ставим по нулям и при помощи border рисуем треугольник. Абсолютно позиционируем, и выравниваем его по левому краю.

Основной каркас кнопки у нас готов, осталось ее анимировать и придать ей красивое оформление.

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

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

Отбираем ссылку, задаем ширину при наведении в 50 пик. Затем делаем отступы и уменьшаем шрифт до 20 пик.

Сразу всем блокам пропишем анимацию плавного перемещения, для этого отбираем их все и задаем transition для всех свойств в 0.5 секунды.

Прописываем перемещение с этим блоком псевдоэлементу :before на 69 пик. влево.

Делаем перемещение второй части кнопки в правую сторону, указываем, что при наведении сместить блок на 185 пик.

Затем блок с текстом будем на 50 пик. выдвигать, отбираем и прописываем перемещение блока.

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

Затем анимируем эффект вращения иконки при помощи transform на 360 градусов, отбираем картинку и прописываем transform: rotate(360deg) ; и также укажем opacity: 0.5; что бы картинка делалась немного прозрачней.

Если сейчас наведем на кнопку, эффекта вращения мы не увидим, так как нужно прописать самой картинке transition . Отбираем и прописываем ей это свойство.

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

Мы сделали полноценную анимированную кнопку и теперь можно ей придать более красивый вид.

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

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

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

У псевдоэлемента прописываем красный цвет под фон ингридиента кнопки.

Заменим у ссылок цвет с темного на белый.

Придадим тексту тень, для этого допишем в классе .b-demo text-shadow: -1px -1px 1px #000000;

Внутренний блок сделаю в голубоватом цвете.

Сразу меняем цвет у псевдоэлемента :after

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

И завершающем этапом, опишем стили при клике мышки

Пропишу тут соответствующий комментарий, затем под ним отбираем два блока с псевдоклассом :active , задаем ингредиент только перевернутый.

Блоку на заднем плане сделаем градиент в этом стиле только отзеркалиный и добавим эффект тени.

Завершающим стилем пропишем при клике вращение иконки в обратном направлении с ее полным проявлением.

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

Всем кому понравился материал обязательно поделитесь им с друзьями.

Effects for buttons

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

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

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

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

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

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

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

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

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

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

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

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