Исходный код -
В данном уроке создадим прикольную #кнопку на #CSS с плавной анимацией раздвоения. Для этого я накидал чертеж что бы проще понимать ее структуру и в данном видео поэтапно разберем создания #анимированной #кнопки с эффектом плавного раздвоения. Идея тут в следующем, сделать кнопку как бы из двух частей, она должна быть анимированной, при наведении раскрываться вторая часть, вытягивая за собой внутренний блок, где находится надпись, а в момент убирания курсора все должно вернуться в исходное положение. Обсуждение видео: • Анимированная КНОПКА на CSS / Button anima... В уроке задействуем: • псевдоэлементы :before, :after; • при помощи position с позиционируем блоки; • псевдоклассами :hover, :activ определим стили при наведении и клику мышки; • и сделаем плавную анимацию при помощи transition, transform. Более подробное описание тут -
Подписка на канал:
Видео сборник:
*Видео метки*: [02:30] - Пишем #html структуру кнопки [05:10] - Описываем #стили кнопки в #CSS [11:37] - :hover, :activ - динамика при наведении [15:32] - Оформляем кнопку *Другие видео на канале DWSTV*: Сайт с нуля -
Уроки по #CSS -
1С Битрикс работа с сайтом -
Управление системой Битрикс -
Настройки сайта 1С Битрикс -
Во время урока я использую: Документацию по #CSS3 Редактор #PhpStorm Ссылки из урока: Архив кода на сайте -
Шрифт Cuprum -
Генератор Градиентов -
Использую музыку Автора: We Don't Talk Anymore (Piano & Violin Orchestral Version) by David Solis • Charlie Puth "We Don't Talk Anymore" (Pian... / davidsolis Добавляйтесь к нам в друзья: Сайт видео-уроков:
Канал в VK автора уроков:
https://vk.com/dwstv Канал группы в VK:
Мы очень рады если видео по #Анимированная #КНОПКА на #CSS3 было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим #WEB разработкам.
