Кнопка с анимацией при наведении используя HTML&CSS шаг за шагом || CSS Animation Tricks Stretching

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

и внутри нее добавим контент stretching растяжение перейдем в стиле обратимся к универсальному селектору обнулим мэджины пэддинги и добавим свойства box sizing border box теперь давайте откроем браузер смотрим что у нас добавилось

Мы видим, есть наша кнопка.

Давайте свернем браузер в половину, свернем Visual Studio Code в половину для наглядности.

И теперь обратимся к селектору тега body.

Для него укажем высота будет 100 бейдж.

И добавим background.

Background у нас будет линейный градиент.

Значение будет идти сверху, to top.

И укажем следующий

Код цвета.

Это будет первый на 0%.

И через запятую добавим второй.

На 100%.

Линейный градиент у нас добавился.

Теперь давайте сделаем размещение кнопки по центру.

Укажем Display Flex.

Justify Content будет центр.

И Align Items также будет центр.

Наша кнопка разместилась по центру.

Теперь давайте ее застилизуем.

Обратимся к селектору тека button и укажем padding отступы сверху и снизу будут на 25 пикселей.

И справа и слева на 60 пикселей.

Видим у нас отступы появились.

Кнопка стала побольше.

Теперь давайте также еще добавим border none значение.

Outline.

добавим background для нашей кнопки включение будет ключевое слово light sea green сделаем загрубление углов со всех сторон на 8 пикселей цвет будет у нее белый сделаем более жирное начертание font-weight 700 укажем и сделаем больше размер font-size на 22 пикселя и также укажем

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

Теперь нам нужно добавить анимацию, чтобы анимация у нас была при наведении.

Для этого нам нужно обратиться к Button и Pseudo классу Hover.

И уже внутри этих блок объявлений, к этим селекторам задать значение Animation.

Название будет Stretching.

на 0.8 секунд и теперь нам нужно задать саму анимацию с помощью функции keyframes добавим название можем скопировать его отсюда ставить сюда и будем указывать следующее значение 0% у нас будет transform scale

3d и значения 1 1 и 1 через запятые можно скопировать этот элемент ставить ниже и укажем 30 процентов и здесь меняем значение на 125 а второе значение на 075 третье значение так и остается единиц вставляем ниже указываем на 40 процентов и меняем значение 075

125 третье значение так и остается здесь будет 50 процентов здесь меняем на 115 и на 085 добавляем на 60 процентов значение будет 095 и 105

Здесь будет 75%.

Будет значение 1.05 и 0.95.

И последнее 100% значение такое же останется.

Scale 3D 1.1.1.

И теперь когда мы наводим на нашу кнопку, у нас идет вот такой вот эффект растяжения для нее.

На этом все.

Спасибо за просмотр и успехов в обучении.

Если вам понравилось данное видео, ставьте лайк и подписывайтесь на мой канал.