ГлавнаяИгрыCounter-strike

Анимированная КНОПКА на CSS / Button animation CSS3

Просмотров 436
Добавлено: 240 дней назад
Встроить видео
0%
Добавьте следующий код на свою страницу, чтобы встроить это видео:
<iframe src="http://tng.pw/embed/123968/" width="650" height="405" frameborder="0"></iframe> <br />
<a href="http://tng.pw//123968/">Анимированная КНОПКА на CSS / Button animation CSS3</a>
Видео входит в курсы: видео урок контре

В данном уроке создадим прикольную #кнопку на #CSS с плавной анимацией раздвоения.
Посмотреть и скачать код - http://bit.ly/2pFcDBG

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

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

Обсуждение видео: https://youtu.be/tWNprz17CK0

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

Более подробное описание тут - http://bit.ly/2pFcDBG
Подписка на канал: https://dwstroy.ru/~dwstv
Видео сборник: https://dwstroy.ru/~S126H

*Видео метки*:
[02:30] - Пишем #html структуру кнопки
[05:10] - Описываем #стили кнопки в #CSS
[11:37] - :hover, :activ - динамика при наведении
[15:32] - Оформляем кнопку

*Другие видео на канале DWSTV*:
Сайт с нуля - https://dwstroy.ru/~7KNnM
Уроки по #CSS - https://dwstroy.ru/~paoBU
1С Битрикс работа с сайтом - https://dwstroy.ru/~dEG4q
Управление системой Битрикс - https://dwstroy.ru/~Zdt4K
Настройки сайта 1С Битрикс - https://dwstroy.ru/~t0UVZ

Во время урока я использую:
Документацию по #CSS3
Редактор #PhpStorm

Ссылки из урока:
Архив кода на сайте - http://bit.ly/2pFcDBG
Шрифт Cuprum - http://bit.ly/2nulfPh
Генератор Градиентов - http://bit.ly/2omhCtB

Использую музыку Автора:
We Don't Talk Anymore (Piano & Violin Orchestral Version) by David Solis
https://www.youtube.com/watch?v=6xdMg9d2pQE
https://www.patreon.com/DavidSolis

Добавляйтесь к нам в друзья:
Сайт видео-уроков: https://dwstroy.ru/video/
Канал в VK автора уроков: https://vk.com/dwstv
Канал группы в VK: https://dwstroy.ru/~MJM28

Мы очень рады если видео по #Анимированная #КНОПКА на #CSS3 было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим #WEB разработкам.

Рекомендуем: