Учебник по анимации границы кнопки

Введение

В этом практическом занятии мы изучим, как создать анимацию границы кнопки при наведении курсора с помощью CSS. Используя псевдо-элементы ::before и ::after, мы можем добавить два прямоугольника выше и ниже кнопки и анимировать изменение их ширины до 100% при наведении курсора. Это практическое занятие поможет вам улучшить свои навыки в CSS и добавить интерактивность на ваших веб-страницах.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Анимация границы кнопки

В ВМ уже предоставлены файлы index.html и style.css.

Для создания анимации границы при наведении курсора можно использовать псевдо-элементы ::before и ::after, чтобы сгенерировать два прямоугольника шириной 24px, расположенных выше и ниже основной кнопки. Затем применить псевдо-класс :hover, чтобы при наведении курсора увеличить ширину этих элементов до 100% и анимировать переход с помощью свойства transition.

Ниже представлен пример кода:

<button class="animated-border-button">Submit</button>

.animated-border-button {
  background-color: #263059;
  border: none;
  color: #ffffff;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
}

.animated-border-button::before,
.animated-border-button::after {
  border: 0 solid transparent;
  transition: all 0.3s;
  content: "";
  height: 0;
  position: absolute;
  width: 24px;
}

.animated-border-button::before {
  border-top: 2px solid #263059;
  right: 0;
  top: -4px;
}

.animated-border-button::after {
  border-bottom: 2px solid #263059;
  bottom: -4px;
  left: 0;
}

.animated-border-button:hover::before,
.animated-border-button:hover::after {
  width: 100%;
}

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по анимации границы кнопки. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.