Анимированная КНОПКА на CSS / Button animation CSS3
Исходный код - http://bit.ly/2pFcDBG
В данном уроке создадим прикольную #кнопку на #CSS с плавной анимацией раздвоения.
Для этого я накидал чертеж что бы проще понимать ее структуру и в данном видео поэтапно разберем создания #анимированной #кнопки с эффектом плавного раздвоения.
Идея тут в следующем, сделать кнопку как бы из двух частей, она должна быть анимированной, при наведении раскрываться вторая часть, вытягивая за собой внутренний блок, где находится надпись, а в момент убирания курсора все должно вернуться в исходное положение.
Обсуждение видео: • Анимированная КНОПКА на CSS / Button ...
В уроке задействуем:
• псевдоэлементы :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
• Charlie Puth "We Don't Talk Anymore" ...
/ davidsolis
Добавляйтесь к нам в друзья:
Сайт видео-уроков: https://dwstroy.ru/video/
Канал в VK автора уроков: https://vk.com/dwstv
Канал группы в VK: https://dwstroy.ru/~MJM28
Мы очень рады если видео по #Анимированная #КНОПКА на #CSS3 было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим #WEB разработкам.
Watch video Анимированная КНОПКА на CSS / Button animation CSS3 online, duration hours minute second in high quality that is uploaded to the channel Denis Gorelov 16 April 2017. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 26,873 times and liked it 1 thousand visitors.
